Javascript 基于包含两个其他输入之和的一个字段添加动态输入

我正在制作一个表格，将两个输入相加，并将此相加的结果放入另一个输入中

输入#1是类型编号，称为成人数量 输入#2是类型编号，称为kid_pay_qty

接收总和的输入称为数量

这是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> 

....
有多少成年人：

有多少孩子：

乘客总数：

其他Pax信息

....

然后我有一个JQuery，它将计算两个输入，并将结果属性化为第三个输入。到目前为止，它工作得很好。 最后，我尝试将名为First Name和Last Name的动态输入添加到此表单中，该输入位于名为input_field_wrap的div中，在两个输入的总和上显示相同的数量。 假设结果是2，我希望将两个名字和两个姓氏输入动态添加到表单中。无论结果如何，我希望在将总和提供给“Quantity_traveling”输入后立即动态添加此金额

请参见下面我的JQuery脚本：

 $(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
          }
       };
 };

$（文档）.ready（函数（）{
$（'#成人数量'）.keyup（函数（）{
updateTotal（）；
});
$（'kid#u pay_qty'）.keyup（函数（）{
updateTotal（）；
});
});
函数updateTotal（）{
var input1=parseInt（$（'成人数量'）.val（）；
var input2=parseInt（$（'kid#u pay_qty'）.val（）；
var总计=输入1+输入2；
$（'数量'）.val（总计）；
var max_fields=total；//允许的最大输入框数
var wrapper=$（“.input_fields_wrapp”）；//字段包装器
var x=1；//初始文本框计数
而（x

总和工作正常，并且会随着Keyup的确定而更新，但不会将输入添加到表单中

提前感谢您的帮助。

首先，e.preventDefault（）正在破坏您的代码。您需要在

while

循环中更改您的条件。因为如果总数为

2

，则在第二个或最后一个循环中

2<2

总是

false

在追加输入之前，请确保清空

包装器的内容。您可以使用jQuery查询您的代码


更改您的功能：

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
  }
}

函数updateTotal（）{
var input1=parseInt（$（“#成人数量”）.val（）；
var input2=parseInt（$（“#kid#u pay_qty”）.val（）；
var总计=输入1+输入2；
$（“旅行数量”）.val（总计）；
var max_fields=total；//允许的最大输入框数
var wrapper=$（“.input_fields_wrapp”）；//字段包装器
var x=1；//初始文本框计数
$（包装器）.empty（）；
while（x首先，e.preventDefault（）正在破坏您的代码。您需要在
while
循环中更改您的条件。因为
2
在您的第二个或最后一个循环中总是
false
，如果总数是
2

在追加输入之前，请确保清空
包装器的内容。您可以在代码中使用jQuery


更改您的功能：

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
  }
}

函数updateTotal（）{
var input1=parseInt（$（“#成人数量”）.val（）；
var input2=parseInt（$（“#kid#u pay_qty”）.val（）；
var总计=输入1+输入2；
$（“旅行数量”）.val（总计）；
var max_fields=total；//允许的最大输入框数
var wrapper=$（“.input_fields_wrapp”）；//字段包装器
var x=1；//初始文本框计数
$（包装器）.empty（）；
while（x