Javascript动态输入计算

Question

I have a form which is dynamic and it calculates duration time. I can insert rows by clicking on Add a new row. My problem starts from the second row which can not be calculated because it is dynamic. Could you please help me with that.

Thanks

 $(document).ready(function() { var max_fields = 10; //maximum input boxes allowed var wrapper = $(".input_fields_wrap"); //Fields wrapper var add_button = $(".add_field_button"); //Add button ID var FieldCount = 1; //to keep track of text box added var x = 1; //initlal text box count $(add_button).click(function(e) { //on add input button click e.preventDefault(); if (x < max_fields) { //max input box allowed x++; //text box increment FieldCount++; wrapper.append('From &rarr; <input type="text" name="fromhours" id="fromhours' + FieldCount + '" onblur="cal()" /> : <input type="text" name="fromminutes" id="fromminutes' + FieldCount + '" onblur="cal()" /> | To &rarr; <input type="text" name="tohours" id="tohours' + FieldCount + '" onblur="cal()" /> : <input type="text" name="tominutes" id="tominutes' + FieldCount + '" onblur="cal()" /> | Result &rarr; <input type="text" name="resulthours" id="resulthours' + FieldCount + '" /> : <input type="text" name="resultminutes" id="resultminutes' + FieldCount + '" /><br /><br />'); //add input box } }); wrapper.on("click", ".remove_field", function(e) { //user click on remove text e.preventDefault(); $(this).parent('div').remove(); x--; }) }); function cal() { var fromhours = parseInt(document.getElementById('fromhours').value) * 60; var fromminutes = parseInt(document.getElementById('fromminutes').value); var tohours = parseInt(document.getElementById('tohours').value) * 60; var tominutes = parseInt(document.getElementById('tominutes').value); var resultfrom = fromhours + fromminutes; var resultto = tohours + tominutes; var result = resultto - resultfrom; var hourresult = parseInt(result / 60); var minutesresult = (result - (hourresult * 60)); document.getElementById('resulthours').value = '0' + hourresult.toFixed(0); document.getElementById('resultminutes').value = ('0' + minutesresult).slice(-2); } 

 input[type=text] { width: 25px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input style="margin-left:28px;" type="image" class="add_field_button" value="Add a new row" /> <br />From &rarr; <input type="text" name="fromhours" id="fromhours" onblur="cal()" />: <input type="text" name="fromminutes" id="fromminutes" onblur="cal()" />| To &rarr; <input type="text" name="tohours" id="tohours" onblur="cal()" />: <input type="text" name="tominutes" id="tominutes" onblur="cal()" />| Result &rarr; <input type="text" name="resulthours" id="resulthours" />: <input type="text" name="resultminutes" id="resultminutes" /> <br /> <br /> <div class="input_fields_wrap"></div> 

My problem is from the second row I can't get my result to work

Answer 1

You need to refer the current element row id by adding x as follows

  wrapper.append('From → 
<input type="text" name="fromhours" id="fromhours' + FieldCount + '" onblur="cal(x)" /> ...


   function cal(x) {
      var fromhours = parseInt(document.getElementById('fromhours'+x).value) *   60;
   ...

 $(document).ready(function() { var max_fields = 10; //maximum input boxes allowed var wrapper = $(".input_fields_wrap"); //Fields wrapper var add_button = $(".add_field_button"); //Add button ID var FieldCount = 1; //to keep track of text box added var x = 1; //initlal text box count $(add_button).click(function(e) { //on add input button click e.preventDefault(); if (x < max_fields) { //max input box allowed x++; //text box increment FieldCount++; wrapper.append('From &rarr; <input type="text" name="fromhours" id="fromhours' + FieldCount + '" onblur="cal('+FieldCount +')" /> : <input type="text" name="fromminutes" id="fromminutes' + FieldCount + '" onblur="cal('+FieldCount +')" /> | To &rarr; <input type="text" name="tohours" id="tohours' + FieldCount + '" onblur="cal('+FieldCount +')" /> : <input type="text" name="tominutes" id="tominutes' + FieldCount + '" onblur="cal('+FieldCount +')" /> | Result &rarr; <input type="text" name="resulthours" id="resulthours' + FieldCount + '" /> : <input type="text" name="resultminutes" id="resultminutes' + FieldCount + '" /><br /><br />'); //add input box } }); wrapper.on("click", ".remove_field", function(e) { //user click on remove text e.preventDefault(); $(this).parent('div').remove(); x--; }) }); function cal(x) { x=x||""; var fromhours = parseInt(document.getElementById('fromhours'+x).value) * 60; var fromminutes = parseInt(document.getElementById('fromminutes'+x).value); var tohours = parseInt(document.getElementById('tohours'+x).value) * 60; var tominutes = parseInt(document.getElementById('tominutes'+x).value); var resultfrom = fromhours + fromminutes; var resultto = tohours + tominutes; var result = resultto - resultfrom; var hourresult = parseInt(result / 60); var minutesresult = (result - (hourresult * 60)); document.getElementById('resulthours'+x).value = '0' + hourresult.toFixed(0); document.getElementById('resultminutes'+x).value = ('0' + minutesresult).slice(-2); } 

 input[type=text] { width: 25px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input style="margin-left:28px;" type="image" class="add_field_button" value="Add a new row" /> <br />From &rarr; <input type="text" name="fromhours" id="fromhours" onblur="cal()" />: <input type="text" name="fromminutes" id="fromminutes" onblur="cal()" />| To &rarr; <input type="text" name="tohours" id="tohours" onblur="cal()" />: <input type="text" name="tominutes" id="tominutes" onblur="cal()" />| Result &rarr; <input type="text" name="resulthours" id="resulthours" />: <input type="text" name="resultminutes" id="resultminutes" /> <br /> <br /> <div class="input_fields_wrap"></div> 

Answer 2

I am not a JS expert, but could it have something to do with the fact, that you refer to the rows under the same ID attribute? As far as I can see you're not specifying to the code which one of the rows to calculate.

See @Bellash answer for a possible solution

Answer 3

You forgot to pass the fieldCount number inside the cal() function and concatenate it with the field ids, so the cal() function always used the first row of text fields. I've corrected your snippet for you.

 $(document).ready(function() { var max_fields = 10; //maximum input boxes allowed var wrapper = $(".input_fields_wrap"); //Fields wrapper var add_button = $(".add_field_button"); //Add button ID var FieldCount = 1; //to keep track of text box added var x = 1; //initlal text box count $(add_button).click(function(e) { //on add input button click e.preventDefault(); if (x < max_fields) { //max input box allowed x++; //text box increment FieldCount++; wrapper.append('From &rarr; <input type="text" name="fromhours" id="fromhours' + FieldCount + '" onblur="cal(' + FieldCount + ')" /> : <input type="text" name="fromminutes" id="fromminutes' + FieldCount + '" onblur="cal(' + FieldCount + ')" /> | To &rarr; <input type="text" name="tohours" id="tohours' + FieldCount + '" onblur="cal(' + FieldCount + ')" /> : <input type="text" name="tominutes" id="tominutes' + FieldCount + '" onblur="cal(' + FieldCount + ')" /> | Result &rarr; <input type="text" name="resulthours" id="resulthours' + FieldCount + '" /> : <input type="text" name="resultminutes" id="resultminutes' + FieldCount + '" /><br /><br />'); //add input box } }); wrapper.on("click", ".remove_field", function(e) { //user click on remove text e.preventDefault(); $(this).parent('div').remove(); x--; }) }); function cal(fieldCount) { console.log(arguments); var fromhours = parseInt(document.getElementById('fromhours' + fieldCount).value) * 60; var fromminutes = parseInt(document.getElementById('fromminutes' + fieldCount).value); var tohours = parseInt(document.getElementById('tohours' + fieldCount).value) * 60; var tominutes = parseInt(document.getElementById('tominutes' + fieldCount).value); var resultfrom = fromhours + fromminutes; var resultto = tohours + tominutes; var result = resultto - resultfrom; var hourresult = parseInt(result / 60); var minutesresult = (result - (hourresult * 60)); document.getElementById('resulthours' + fieldCount).value = '0' + hourresult.toFixed(0); document.getElementById('resultminutes' + fieldCount).value = ('0' + minutesresult).slice(-2); } 

 input[type=text] { width: 25px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input style="margin-left:28px;" type="image" class="add_field_button" value="Add a new row" /> <br />From &rarr; <input type="text" name="fromhours" id="fromhours1" onblur="cal(1)" />: <input type="text" name="fromminutes" id="fromminutes1" onblur="cal(1)" />| To &rarr; <input type="text" name="tohours" id="tohours1" onblur="cal(1)" />: <input type="text" name="tominutes" id="tominutes1" onblur="cal(1)" />| Result &rarr; <input type="text" name="resulthours" id="resulthours1" />: <input type="text" name="resultminutes" id="resultminutes1" /> <br /> <br /> <div class="input_fields_wrap"></div> 

Answer 4

You have to get the unique id and use that in your calculations. In the JS I replaced the function with an on keyup and added a statement to prevent the NaN

JS

$(document).ready(function() {
  var max_fields = 10; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID
  var FieldCount = 1; //to keep track of text box added
  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      FieldCount++;
      wrapper.append('From &rarr; <input type="text" class="cal" name="fromhours" id="fromhours' + FieldCount + '" /> : <input type="text" class="cal" name="fromminutes" id="fromminutes' + FieldCount + '" /> | To &rarr; <input type="text" class="cal" name="tohours" id="tohours' + FieldCount + '" /> : <input type="text" class="cal" name="tominutes" id="tominutes' + FieldCount + '" /> | Result &rarr; <input type="text" class="cal" name="resulthours" id="resulthours' + FieldCount + '" /> : <input type="text" class="cal" name="resultminutes" id="resultminutes' + FieldCount + '" /><br /><br />'); //add input box
    }
  });

  wrapper.on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })
});

$('body').on('keyup', '.cal', function () {
    var id = $(this).attr('id').substr(-1),
        fromhours = ~~$('#fromhours' + id).val(),
        fromminutes = ~~$('#fromminutes' + id).val(),
        tohours = ~~$('#tohours' + id).val(),
        tominutes = ~~$('#tominutes' + id).val();

    if (fromhours != '' && fromminutes != '' && tohours != '' && tominutes != '') {
        var resultfrom = (fromhours * 60) + fromminutes,
            resultto = (tohours * 60) + tominutes,
            result = resultto - resultfrom,
            hourresult = ~~(result/60),
            minuteresult = ~~(result - hourresult * 60);
        $('#resulthours' + id).val(hourresult);
        $('#resultminutes' + id).val(minuteresult);
    }
});

HMTL

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input style="margin-left:28px;" type="image" class="add_field_button" value="Add a new row" />
<br />From &rarr;
<input type="text" class="cal" name="fromhours" id="fromhours1" />:
<input type="text" class="cal" name="fromminutes" id="fromminutes1" /> | To &rarr;
<input type="text" class="cal" name="tohours" id="tohours1" />:
<input type="text" class="cal" name="tominutes" id="tominutes1" /> | Result &rarr;
<input type="text" class="cal" name="resulthours" id="resulthours1" />:
<input type="text" class="cal" name="resultminutes" id="resultminutes1" />
<br />
<br />
<div class="input_fields_wrap"></div>