106

我已经阅读了许多关于动态添加字段集的博客和帖子，但它们都给出了非常复杂的答案。我需要的并不复杂。

我的 HTML 代码：

<input type="text" name="member" value="">Number of members: (max. 10)<br />
<a href="#" id="filldetails">Fill Details</a>

因此，用户将在该字段中输入一个整数值（我正在使用 javascript 检查验证）input。点击Fill Details链接后，会出现相应数量的输入框供他输入。我想使用 javascript 来实现这一点。

我不是javascript专业人士。我在想如何input通过链接检索用户在字段中填写的整数并显示相应数量的输入字段。

4

2 回答 2

170

您可以使用onclick事件处理程序来获取文本字段的输入值。确保为该字段提供一个唯一id属性，以便您可以通过以下方式安全地引用它document.getElementById()：

如果你想动态添加元素，你应该有一个容器来放置它们。例如，一个<div id="container">. 通过 创建新元素document.createElement()，并使用appendChild()将它们中的每一个附加到容器中。您可能对输出一个有意义的name属性感兴趣（例如name="member"+i，对于每个动态生成<input>的 s，如果它们要在表单中提交。

请注意，您还可以<br/>使用document.createElement('br'). 如果您只想输出一些文本，则可以document.createTextNode()改用。

此外，如果您想在每次填充容器时清除容器，您可以一起使用hasChildNodes()和removeChild()。

<html>
<head>
    <script type='text/javascript'>
        function addFields(){
            // Number of inputs to create
            var number = document.getElementById("member").value;
            // Container <div> where dynamic content will be placed
            var container = document.getElementById("container");
            // Clear previous contents of the container
            while (container.hasChildNodes()) {
                container.removeChild(container.lastChild);
            }
            for (i=0;i<number;i++){
                // Append a node with a random text
                container.appendChild(document.createTextNode("Member " + (i+1)));
                // Create an <input> element, set its type and name attributes
                var input = document.createElement("input");
                input.type = "text";
                input.name = "member" + i;
                container.appendChild(input);
                // Append a line break 
                container.appendChild(document.createElement("br"));
            }
        }
    </script>
</head>
<body>
    <input type="text" id="member" name="member" value="">Number of members: (max. 10)<br />
    <a href="#" id="filldetails" onclick="addFields()">Fill Details</a>
    <div id="container"/>
</body>
</html>

请参阅此JSFiddle中的工作示例。

于 2013-02-13T12:45:00.183 回答
45

试试这个 JQuery 代码来动态包含表单、字段和删除/删除行为：

$(document).ready(function() {
    var max_fields = 10;
    var wrapper = $(".container1");
    var add_button = $(".add_form_field");

    var x = 1;
    $(add_button).click(function(e) {
        e.preventDefault();
        if (x < max_fields) {
            x++;
            $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="delete">Delete</a></div>'); //add input box
        } else {
            alert('You Reached the limits')
        }
    });

    $(wrapper).on("click", ".delete", function(e) {
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container1">
    <button class="add_form_field">Add New Field &nbsp; 
      <span style="font-size:16px; font-weight:bold;">+ </span>
    </button>
    <div><input type="text" name="mytext[]"></div>
</div>

于 2017-02-17T08:53:59.427 回答