Javascript dynamic inputs calculation

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

Bellash · Accepted Answer · 2015-05-27 08:31:02Z

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

  wrapper.append('From &rarr; 
<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>

Andreas Kruhlmann · Accepted Answer · 2015-05-27 08:25:44Z

1

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

edited May 27, 2015 at 8:25

answered May 27, 2015 at 8:17

Andreas Kruhlmann

1612 silver badges10 bronze badges

Comments

Forketyfork · Accepted Answer · 2015-05-27 08:29:10Z

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>

Thalsan · Accepted Answer · 2015-05-27 08:45:03Z

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>

Collectives™ on Stack Overflow

Javascript dynamic inputs calculation

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related