通过单击按钮动态地将文本框添加到表单 [英] dynamically adding textboxes to a form by the click of a button
问题描述
我是一名php程序员。我有一个用户输入表单，其中一个人应该可以通过点击按钮添加尽可能多的文本框（以输入多个电子邮件ID）。点击：点击该按钮第一次添加了一个附加文本框。他第二次点击该按钮，添加了另一个文本框....依此类推。
I am a php programmer .I have a user input form in which a person should be able to add as many text boxes (to enter muliple email ids ) as he wishes , by the click of a button.eg:He clicks the button for the first time an additional text box is added.He clicks the button for the second time , another text box added ....and so on and so forth.
推荐答案
您可以通过 document.createElement ，并通过 appendChild ，如下所示：
You can create elements via document.createElement, and append them to a form via appendChild, like so:
var textbox = document.createElement('input');
textbox.type = 'text';
document.getElementById('theForm').appendChild(textbox);
（假设表格有 id =theForm，但你可以通过其他方式获得对表单的引用。）
(That assumes the form has an id = "theForm", but you can get the reference to the form other ways.)
如果你想将它包装在标签中，那也很容易：
If you want to wrap it in a label, that's easy, too:
var label, textbox;
label = document.createElement('label');
label.appendChild(document.createTextNode('Another email address: '));
textbox = document.createElement('input');
textbox.type = 'text';
label.appendChild(textbox);
document.getElementById('theForm').appendChild(label);
如果你开始使用DOM规范（ DOM Core 2 是目前支持最广泛的， HTML内容; DOM Core 3 现在得到一些支持），你会发现其他你可以做的事情 —例如 插入 进入中间的表单而不是追加到最后等等。
If you kick around the DOM specs (DOM Core 2 is the most widely-supported at present, as is the HTML stuff on top of it; DOM Core 3 is getting some support now), you'll find other things you can do — like inserting into the form in the middle rather than appending to the end, etc.
大部分时间，你可以使用 innerHTML 添加到DOM结构（每个主要浏览器都支持它，并且作为HTML5的一部分得到标准化），但是在表单字段周围有一些浏览器怪癖，这就是为什么我'已经使用了上面的DOM界面。
Most of the time, you can use innerHTML to add to DOM structures (it's supported by every major browser, and is getting standardized as part of HTML5), but there are some browser quirks around form fields, specifically, which is why I've gone with the DOM interface above.
你没有说你正在使用一个库，所以上面是纯JavaScript + DOM。它相当简单，但在实际使用中，您可以快速遇到并发症。这是一个JavaScript库，如 jQuery ，原型， YUI ，关闭，或其他几个可以节省您的时间，平滑浏览器的差异和复杂性，让您专注于您实际想要做的事情。
You haven't said you're using a library, and so the above is pure JavaScript+DOM. It's fairly simple, but in real world use you can quickly run into complications. That's where a JavaScript library like jQuery, Prototype, YUI, Closure, or any of several others can save you time, smoothing over browser differences and complications for you, allowing you to focus on what you're actually trying to do.
例如，在链接中例如，我必须提供一个 hookEvent 函数来处理某些浏览器使用（标准化） addEventListener 函数的事实，而IE9之前的IE则使用 attachEvent 。库会处理我正在讨论的表单字段怪癖，允许您使用直接HTML指定字段，如下所示：
For instance, in the linked example, I had to provide a hookEvent function to handle the fact that some browsers use the (standardized) addEventListener function, while IE prior to IE9 uses attachEvent instead. And libraries will handle the form field quirks I was talking about, allowing you to specify your fields using straight HTML, like this:
使用 jQuery ：
$("#theForm").append("<label>Another email address: <input type='text'>");
使用原型：
$("theForm").insert("<br><label>Another email address: <input type='text'>");
这篇关于通过单击按钮动态地将文本框添加到表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
