从按钮生成新的输入字段

generate new input fields from button

本文关键字：输入 字段 按钮      更新时间：2023-09-26

我想通过单击按钮生成一组输入框。我几乎只需要它们是示例代码中原始输入框的克隆，以及手头的文本；角度和幅值。然后，我必须能够从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

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

尝试

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