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”etc

Answer 1

在下面的小提琴（http://jsfiddle.net/jg4mbpnf/2/）中，我通过jQuery中的DOM函数动态地将HTML添加到.on。然后，当用户单击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');
});

从按钮生成新的输入字段

3 个答案: