從按鈕

Question

生成新的輸入字段我想通過單擊按鈕生成一組輸入框。我幾乎只需要他們在我的示例代碼中的原始輸入框的克隆以及之前的文本;角度和幅度。 從submit_angle_button我必須能夠檢索所有輸入框中的信息。讓我知道你是否需要任何信息。
HTML

<div id="angleWrapper"> 
    <label>Add angled force</label><br> 
    <form> 
     Angle:<input type="text" id="userAngle" maxlength="3"> 
     Magnitude:<input type="text" id="userMagnitude" maxlength="2"> 
     <button id="add_button">Add</button><br> 
     <button id="submit_angle_button">Enter</button> 
    </form> 
</div> 

的Javascript

$(document).ready(function(){ 
    $("#add_button").click(function(){ 
     //code to create and display new text box 
    }); 
    $("#submit_angle_button").click(function(){ 
     getInputs(); //Function that takes the values of all text boxes 
    }); 
}); 

編輯：我必須能夠從第一組箱子來單獨訪問新的輸入框的信息，因爲我想要生成更多比一組輸入框，id可能需要進行分類。例如ID = 「1_userAngle」 ID = 「2_userAngle」 等

Answer 1

在下文小提琴（http://jsfiddle.net/jg4mbpnf/2/）我動態在jQuery中通過.on函數將HTML添加到DOM。然後當用戶點擊submit_angle_button按鈕時，我收集數組中每個元素的所有數據。最後的結果是一系列角度和一系列數值。

Answer 2

HTML

<div id="angleWrapper"> 
    <label>Add angled force</label><br> 
    <form> 
     Angle:<input type="text" id="userAngle" maxlength="3"> 
     Magnitude:<input type="text" id="userMagnitude" maxlength="2"> 
      <div id="target_div"></div> 
      <button id="add_button">Add</button><br> 
      <button id="submit_angle_button">Enter</button> 
     </form> 

</div> 

的JavaScript

$(document).ready(function(){ 
     $("#add_button").click(function(){ 
      var inner_html = 'Angle:<input type="text" id="userAngle" maxlength="3">' 
      +'Magnitude:<input type="text" id="userMagnitude" maxlength="2">'; 
      $("#target_div").append(inner_html); 
     }); 
     $("#submit_angle_button").click(function(){ 
      getInputs(); //Function that takes the values of all text boxes 
     }); 
    }); 

    function getInputs() 
    { 
    $(input).each(function(){ console.log($(this).val()) }); 
    } 

Answer 3

嘗試

$("#add_button").click(function(){ 
    $('<input type="text"/>').appendTo('form'); 
});