动态添加输入元素以形成
[英]Adding input elements dynamically to form
问题描述
I've read many blogs and posts on dynamically adding fieldsets, but they all give a very complicated answer.
我已经阅读了许多关于动态添加字段集的博客和帖子，但它们都给出了非常复杂的答案。 What I require is not that complicated.我需要的并不复杂。
My HTML Code:我的 HTML 代码：
<input type="text" name="member" value="">Number of members: (max. 10)<br />
<a href="#" id="filldetails">Fill Details</a>
So, a user will enter an integer value (I'm checking the validation using javascript) in the input field.因此，用户将在input字段中输入一个整数值（我正在使用 javascript 检查验证）。 And on clicking the Fill Details link, corresponding number of input fields will appear for him to enter.点击“ Fill Details ”链接，将出现相应数量的输入字段供他输入。 I want to achieve this using javascript.我想使用 javascript 来实现这一点。
I'm not a pro in javascript.我不是javascript专业人士。 I was thinking how can I retrieve the integer filled in by the user in input field through the link and displaying corresponding number of input fields.我在想如何通过链接检索用户在input字段中填写的整数并显示相应数量的输入字段。
2 个解决方案
解决方案1
172 已采纳 2013-02-13 12:45:00
You could use an onclick event handler in order to get the input value for the text field.您可以使用onclick事件处理程序来获取文本字段的输入值。 Make sure you give the field an unique id attribute so you can refer to it safely through document.getElementById() :确保为该字段提供唯一的id属性，以便您可以通过document.getElementById()安全地引用它：
If you want to dynamically add elements, you should have a container where to place them.如果你想动态添加元素，你应该有一个容器来放置它们。 For instance, a <div id="container"> .例如，一个<div id="container"> 。 Create new elements by means of document.createElement() , and use appendChild() to append each of them to the container.通过document.createElement()创建新元素，并使用appendChild()将每个元素附加到容器中。 You might be interested in outputting a meaningful name attribute (eg name="member"+i for each of the dynamically generated <input> s if they are to be submitted in a form.您可能有兴趣为每个动态生成的<input>输出一个有意义的name属性（例如name="member"+i ，如果它们要在表单中提交。
Notice you could also create <br/> elements with document.createElement('br') .请注意，您还可以使用document.createElement('br')创建<br/>元素。 If you want to just output some text, you can use document.createTextNode() instead.如果你只想输出一些文本，你可以使用document.createTextNode()代替。
Also, if you want to clear the container every time it is about to be populated, you could use hasChildNodes() and removeChild() together.此外，如果您想在每次填充容器时清除它，您可以同时使用hasChildNodes()和removeChild() 。
<html> <head> <script type='text/javascript'> function addFields(){ // Generate a dynamic number of inputs var number = document.getElementById("member").value; // Get the element where the inputs will be added to var container = document.getElementById("container"); // Remove every children it had before 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>
解决方案2
46 2017-02-17 08:53:59
Try this JQuery code to dynamically include form, field, and delete/remove behavior:试试这个 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 <span style="font-size:16px; font-weight:bold;">+ </span> </button> <div><input type="text" name="mytext[]"></div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.