动态添加/删除新输入到表单

Posted 2023-05-09

【中文标题】动态添加/删除新输入到表单

【英文标题】：Dynamically add/remove new input to form

【发布时间】：2011-07-20 15:46:16

【问题描述】：

所以我是一个初学者，正如标题所说，我希望能够；单击按钮，允许用户向我的表单添加另一个输入字段。我也希望能够删除它。

表单的用途是将学生添加到学生组，然后我将其存储在我的数据库中。

我的表单示例：

<form name="addstudents" id="addstudents" method="post" action="add_students.php">
<table><tr><td>Student:</td><td>
<input type='text' name="1" size='20'></td><td><input type="button" id="add" value="+">    
</td><td><input type="button" id="remove" value="-"></td>
</table></form>

但是从我所看到的情况来看，有不同的建议，例如使用 clone() 函数或 Jquery appendto()。

这样做的最佳方法是什么？

谢谢

【问题讨论】：

你不需要这个表。您也可以尝试使用标签。

【参考方案1】：

$('form').append('<input ...'); //take care of appending valid DOM elements

【参考方案2】：

//Create the input element
var $el = $('<input>')//Set the attribute that you want
                      .attr('id','inputID')
                      .attr('readonly',true);
//And append it to the form
$('#addstudents').append($el);

【参考方案3】：

请记住，您也可以从表单中删除任何 DOM，只需找到合适的 jquery 选择器

$('form > input:last').remove(); // to remove last input

检查 sample 上的 jsfiddle.net 以帮助您解决此问题

【参考方案4】：

我会使用 javascript，我已经回答了这个问题 here。只需使用纯 JavaScript 来编辑页面的 html。希望这会有所帮助！