动态添加输入元素以形成表单

an

我已经阅读了许多关于动态添加字段集的博客和文章,但是它们都给出了非常复杂的答案。我所需要的不是那么复杂。

我的HTML代码:

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

因此,用户将在该input字段中输入一个整数值(我正在使用javascript检查验证)在单击Fill Details链接时,将出现相应数量的输入字段供他输入。我想使用javascript实现此目的。

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

哈维·洛佩斯(XaviLópez):

您可以使用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中的工作示例

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

来自分类Dev

React:动态添加输入字段以形成表单

来自分类Dev

Django-动态添加字段以形成表单

来自分类Dev

动态添加/删除表单输入

来自分类Dev

动态生成输入type =“ file”元素以进行多次上传

来自分类Dev

在Angular 7中添加行以动态形成表单

来自分类Dev

使用jQuery禁用除表单中的某些元素以外的所有输入元素

来自分类Dev

动态添加输入元素[纯JS]

来自分类Dev

动态添加和删除表单元素的表单验证

来自分类Dev

动态添加输入表单字段问题reactjs

来自分类Dev

如何动态添加具有引导表单元素的div?

来自分类Dev

如何在jQuery中动态添加表单元素?

来自分类Dev

C#表单应用程序动态添加的元素定位

来自分类Dev

添加span元素以显示错误消息

来自分类Dev

添加新元素以循环映射

来自分类Dev

在TYPO3 FORM中添加数据属性以形成表单元素

来自分类Dev

输入一个列表中的元素以添加到另一个列表中

来自分类Dev

除了动态创建的元素以外,单击html元素?

来自分类Dev

休息操作员-动态删除元素以休息

来自分类Dev

jQuery获取动态嵌套元素以调用动画方法

来自分类Dev

动态添加输入字段

来自分类Dev

动态添加的输入

来自分类Dev

动态添加输入字段

来自分类Dev

角动态表单组输入

来自分类Dev

反应表单动态输入字段

来自分类Dev

从Json中获取元素以在Picker中输入

来自分类Dev

流星自动形成添加额外的输入

来自分类Dev

如何重复数组元素以形成nxm维数组或矩阵

来自分类Dev

试图选择`button`元素以添加onClick事件

来自分类Dev

添加反应本机元素以反应本机时出错

TOP 榜单

热门标签

归档