根據包含兩個其他輸入之和的一個字段添加動態輸入

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爲唯一的。