0

I am using JQuery Timepicker and I am adding dynamic fields on which O applied Timepicker. I want that when user selects time on both fields, it will automatically display the number of hours in hours.

This is my HTML of time field with a button of add more fields by clicking button it calls method of JavaScript and add more fields:

<label id="l" style="width:160px;">From</label>
<input name="from[]" id="tm1" class="l" type="text" size="15" height="5px" onblur="" value="" style="width:auto;"/>
<label id="l" style="width:20px;">To</label>
<input name="to[]"  id="tm" class="l" type="text" size="15" height="5px" onblur="" value="" style="width:auto;"/>
<label id="l" style="width:30px;">Hours</label>
<input name="hours[]" id="l" type="text" size="15" height="5px" onblur="" value="" style="width:auto;" readonly="readonly"/>
<input type="button" id="add_sch()" onclick="add_sch('add_sch')" name="btn" value="Add More!" /><br>

Cloning fields:

<div id="add_sch" style="display:none">
<label id="l" style="width:160px;">From</label>
<input name="from[]" class="tm"  type="text" size="15" height="5px" onblur="" value="" style=":Arial;font-weight:normal;font-size:11px;color:#7c7b77;outline: none;border: 1px solid #c7c7c7;margin:3px 5px;padding:8px 0;padding-left:5px;-moz-box-shadow: 0 0 5px #c7c7c7;-webkit-box-shadow: 0 0 5px #c7c7c7;box-shadow: 0 0 5px #c7c7c7;float:left;border-radius: 5px;"/>
<label id="l" style="width:20px;">To</label>
<input name="to[]" class="tm"  type="text" size="15" height="5px" onblur="" value="" style=":Arial;font-weight:normal;font-size:11px;color:#7c7b77;outline: none;border: 1px solid #c7c7c7;margin:3px 5px;padding:8px 0;padding-left:5px;-moz-box-shadow: 0 0 5px #c7c7c7;-webkit-box-shadow: 0 0 5px #c7c7c7;box-shadow: 0 0 5px #c7c7c7;float:left;border-radius: 5px;"/>
<label id="l" style="width:30px;">Hours</label>
<input name="hours[]" id="l" type="text" size="15" height="5px" onblur="" value="" style="width:auto;" readonly="readonly"/></div>

JavaScript:

var counter = 0;
function add_sch (FieldName) {
    counter++;
    var newFields = document.getElementById(FieldName).cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';
    var newField = newFields.childNodes;
    for (var i=0;i<newField.length;i++) {
        var theName = newField[i].name
        if (theName)
            newField[i].name = theName + counter;
    }
    var insertHere = document.getElementById(FieldName);
    insertHere.parentNode.insertBefore(newFields,insertHere);
    $(newFields).find('.tm').timepicker();
}
3
  • get both time in variable and then calculate time you will get hours Jan 24, 2013 at 7:36
  • i know that man but when i add dynamic fields how should i get that Jan 24, 2013 at 7:38
  • 1
    Give unique id to each row means both textbox Jan 24, 2013 at 8:15

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.