按下按钮而不重新加载时将 HTML 表单字段添加到现有表单答案

【问题标题】：Add HTML form field to existing form when a button is pressed without reloading按下按钮而不重新加载时将 HTML 表单字段添加到现有表单
【发布时间】：2012-03-09 08:18:05
【问题描述】：

我在谷歌搜索时发现了很多 JavaScript 示例。但是，它们都不适合我。

我想完成一个相对简单的任务：通过按下表单中的添加字段按钮，应该会显示第二个选择字段。这应该无限期地继续下去。因为我已经在使用jQuery 库，所以我也更愿意在这里使用它。

按下添加字段按钮后，页面不应重新加载。

【问题讨论】：

标签： javascript jquery html forms

【解决方案1】：

使用 append 方法可以轻松编写脚本。但是，如果您想更认真地执行此操作，请阅读 DOM 脚本。

见：

Tinker here
延伸阅读：How to dynamically add form elements via JavaScript

【讨论】：

【解决方案2】：

查看示例How to hide, show, or toggle your div。

【讨论】：

谢谢，这里有一些很好的例子。也许不要无限地使用新领域而是将其限制在 10 个左右是有意义的。谢谢。顺便说一句，有一个涵盖 jquery randomsnippets.com/2011/04/10/… 的更新

【解决方案3】：

尝试after()、append() 和appendTo() 方法（参见Category: Manipulation）。

【讨论】：

根据问题中的一些关键字，我猜测问题是单击按钮时表单正在发布。
这个问题应该通过使用“常规”按钮而不是提交按钮来解决。或使用event.preventDefault() 捕捉标准行为（发布表单）。

【解决方案4】：

var newSelectField = "<select><option>Option 1</option><option>Option 2</option></select>"; 

$("#formID").append(newSelectField);

//make sure your button is not of type="submit"
<input type="button" value="Add new field" />

【讨论】：

【解决方案5】：

这很容易做到。要么你追加一个新元素，像这样：

$("form").append($('<input type="text">');

或者，您已经将 HTML 放入表单中，但使用 CSS 使其不可见，然后显示它，如下所示：

<form>
    <input type="text" class="hidden">
</form>

$("#theNewField").removeClass('hidden');

【讨论】：

【解决方案6】：

没有示例代码，我只能猜测问题出在哪里，但听起来您使用的是提交输入而不是按钮输入，这会导致您的表单提交和页面重新加载，而不是仅仅触发“添加元素”功能。如果是这种情况，请执行以下操作：

将添加按钮更改为如下所示：

 <input type="button" id="addOption" value="Add" />

如果还没有，请在您的脚本中添加事件监听器，用于单击按钮时：

 $("#addOption").click (function(){
 // Add stuff
}):

遵循 Patrick 关于 jQuery 操作方法的建议。

【讨论】：