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

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的名为名和姓的动态输入，其输入和输入的总和相同。 假设结果是两个，我希望将两个First Name和两个Last Name输入动态添加到表单中。无论结果如何，只要将总和赋给“qty_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 
      } 
     }; 
}; 

总和可以正常使用，并作为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 s为唯一的。