Alexandre1973 Alexandre1973 - 2 months ago 18
jQuery Question

Adding dynamic input based on one field that contains a sum of two other inputs

I am working on a form that sums two inputs and put the result of this sum in another input.

Input #1 is type number and it's called adult_qty
Input #2 is type number and it's called kid_pay_qty

The input that receives the sum is called qty_traveling.

This is the HTML

<form>
....
<label for "adult_qty">How many adults:</label><br/>
<input type="number" name="adult_qty" id="adult_qty" size="5" value="0">

<label for "kid_pay_qty">How many children:</label><br/>
<input type="number" name="kid_pay_qty" id="kid_pay_qty" size="5" value="0">

<label for "qty_traveling">Total of Pax:</label><br/>
<input type="text" name="qty_traveling" id="qty_traveling" size="5" value="0" readonly>

<p><h2>Other Pax Information</h2></p>
<div class="input_fields_wrap">

</div>
....
</form>


Then I have a JQuery that will calculate the two inputs and attribute the result to the third input. So far it is working very good.
Finally I am trying to add to this form dynamic inputs called First Name and Last Name inside of a div called input_field_wrap in the same amount displayed on the sum of the two inputs.
Let's say that the result is two, I would like to have two First Name and two Last Name inputs added to the form dynamically. Whatever is the result, I would like to have this amount added dynamically as soon as the sum is given to the "qty_traveling" input.

Please see below my JQuery script:

$(document).ready(function() {

$('#adult_qty').keyup(function() {
updateTotal();
});

$('#kid_pay_qty').keyup(function() {
updateTotal();
});
});

function updateTotal() {
var input1 = parseInt($('#adult_qty').val());
var input2 = parseInt($('#kid_pay_qty').val());
var total = input1 + input2;

$('#qty_traveling').val(total);

var max_fields = total; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper

var x = 1; //initlal text box count

while(x < max_fields){

e.preventDefault();

x++; //text box increment
$(wrapper).append('<div><div id="left_col"><label for "otherFirstname[]">First Name:</label></div><div id="right_col"><input type="text" name="otherFirstname[]" id="otherFirstname"/></div></div>'); //add input box
$(wrapper).append('<div><div id="left_col"><label for "otherLastname[]">Last Name:</label></div><div id="right_col"><input type="text" name="otherLastname[]" id="otherLastname"/></div></div>'); //add input box
}
};
};


The sum is working perfectly and it gets updated as the Keyup determines but the inputs are not being added to the form.

Thanks in advance for any help.

Answer Source

First, e.preventDefault() is breaking your code. And you need to change you condition in the while loop. Since 2 < 2 is always false in you 2nd or last loop if your total is 2.

Make sure you empty wrapper's content before you append the inputs. You can use jQuery empty() to your code.

Working Demo.

Change your function:

function updateTotal() {
  var input1 = parseInt($("#adult_qty").val());
  var input2 = parseInt($("#kid_pay_qty").val());
  var total = input1 + input2;

  $("#qty_traveling").val(total);

  var max_fields = total; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper

  var x = 1; //initlal text box count
  $(wrapper).empty();
  while (x <= max_fields) {
    //e.preventDefault();

    x++;
    //text box increment
    $(wrapper).append(
      '<div><div id="left_col"><label for "otherFirstname[]">First Name:</label></div><div id="right_col"><input type="text" name="otherFirstname[]" id="otherFirstname"/></div></div>'
    ); //add input box
    $(wrapper).append(
      '<div><div id="left_col"><label for "otherLastname[]">Last Name:</label></div><div id="right_col"><input type="text" name="otherLastname[]" id="otherLastname"/></div></div>'
    ); //add input box
  }
}

Also, make sure you ids are unique.