Question

我正在处理一个表格，该表格将两个输入相加并将此总和的结果放在另一个输入中。

输入＃1是类型编号，它被称为adult_qty 输入＃2是类型编号，它被称为kid_pay_qty

接收总和的输入称为qty_traveling。

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

然后我有一个JQuery，它将计算两个输入并将结果归因于第三个输入。到目前为止，它的工作非常好。最后，我试图在这个表单中添加一个名为Input_field_wrap的div中名为First Name和Last Name的动态输入，其数量显示在两个输入的总和上。让我们说结果是两个，我想动态地将两个First Name和两个Last Name输入添加到表单中。无论结果如何，我希望一旦将总和给予＆＃34; qty_traveling＆＃34;输入

请参阅下面的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
          }
       };
 };

总和工作正常，并且在Keyup确定时会更新，但输入没有添加到表单中。

提前感谢您的帮助。

Answer 1

首先，e.preventDefault（）破坏了你的代码。您需要在while循环中更改条件。如果您的总数为2 < 2，则false在您的第二轮或最后一轮中始终为2。

确保在附加输入之前清空wrapper的内容。您可以在代码中使用jQuery empty()。

Working Demo

更改您的功能：

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

另外，请确保id是唯一的。

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

1 个答案: