jQuery - 动态添加、删除form表单项(附:新增项数据无法提交问题解决)
一、在 Form 表单中动态新增、删除项目
在 Web 开发中,使用 form 表单提交数据大家一定不会陌生。但有时表单项数量并不是固定的,比如我们要提交一个人员信息列表,人员数量不定,填写完毕后一次性提交。这就要求表单可以动态地增加或删除输入项。
1,效果图
(1)页面初始化后默认有两个表单项(两个输入框)。
(2)点击“新增一项”按钮,则在末尾添加一个新的输入条目。
(3)点击“删除”按钮则将对应的输入条目给删去。
(4)点击“提交”按钮则将表单中所有的项目进行提交。

2,样例代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hangge.comm</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <style> #container{ width:380px; margin:20px auto; padding:15px; background-color:#eee; border-radius: 15px; } /** 新增按钮 **/ #addVar{ margin:0 0 0 52px; padding:5px; display:inline-block; background-color:#3A9668; color:#f1f1f1; border:1px solid #005; border-radius: 4px; } /** 删除按钮 **/ .removeVar{ margin:auto; padding:5px; display:inline-block; background-color:#B02109; color:#f1f1f1; border:1px solid #005; border-radius: 4px; } #addVar:hover, .removeVar:hover{ cursor: pointer; } .alignRight{ text-align: right; } input, textarea{ padding:5px; font-size: 16px; } </style> <script> //初始参数个数 var varCount = 2; $(function () { //新增按钮点击 $('#addVar').on('click', function(){ varCount++; $node = '<p><label for="var'+varCount+'">项目 '+varCount+': </label>' + '<input type="text" name="var'+varCount+'" id="var'+varCount+'">' + '<span class="removeVar">删除</span></p>'; //新表单项添加到“新增”按钮前面 $(this).parent().before($node); }); //删除按钮点击 $('form').on('click', '.removeVar', function(){ $(this).parent().remove(); //varCount--; }); }); </script> </head> <body> <div id="container"> <form id="myForm" method="post"> <p> <label for="var1">项目 1: </label> <input type="text" name="var1" id="var1"> <span class="removeVar">删除</span> </p> <p> <label for="var2">项目 2: </label> <input type="text" name="var2" id="var2"> <span class="removeVar">删除</span> </p> <p><span id="addVar">新增一项</span></p> <p class="alignRight"><input type="submit" value="提交"></p> </form> </div> </body> </html>
3,运行效果
这里我新增一个条目,一个提交 3 条数据。从捕获的请求可以看到,3 条数据都已成功提交。

二、动态新增项目的数据无法提交问题
可能有人碰到数据丢失问题,明明新增的 input 元素是在 Form 内部,界面上也能显示,可提交的时候这个 input 数据却带不过去。下面通过样例进行解释。1,问题样例
可能有人喜欢表单使用 table 进行布局。比如我们在 form 外包裹个 table,然后动态新增的项目插入到 td。具体代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hangge.comm</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <style> #container{ width:270px; margin:20px auto; padding:15px; background-color:#eee; border-radius: 15px; } button, input, textarea{ padding:5px; font-size: 16px; } </style> <script> //初始参数个数 var varCount = 2; $(function () { //新增按钮点击 $('#addVar').on('click', function(){ varCount++; $node = '<p><label for="var'+varCount+'">项目 '+varCount+': </label>' + '<input type="text" name="var'+varCount+'" id="var'+varCount+'"></p>'; //新表单项添加到td中 $("#myTd").append($node); }); }); </script> </head> <body> <div id="container"> <table id="myTable"> <form id="myForm" method="post"> <tr> <td id="myTd"> <p><label for="var1">项目 1: </label><input type="text" name="var1" id="var1"></p> <p><label for="var2">项目 2: </label><input type="text" name="var2" id="var2"></p> </td> </tr> <tr> <td> <input id="addVar" type="button" value="新增一项"/> <input type="submit" value="提交" style="float:right"/> </td> </tr> </form> </table> </div> </body> </html>这次我们同样提交3条数据(默认两个,新增一个)。抓取数据后发现,新添加的那个表单项数据并没有随表单一起提交。


2,问题解决
这个问题比较奇葩。我们将 form 与 table 层次调整下便能解决问题,将原来的 table 包裹 from,改成 form 包裹 table 即可。
<div id="container"> <form id="myForm" method="post"> <table id="myTable"> <tr> <td id="myTd"> <p><label for="var1">项目 1: </label><input type="text" name="var1" id="var1"></p> <p><label for="var2">项目 2: </label><input type="text" name="var2" id="var2"></p> </td> </tr> <tr> <td> <input id="addVar" type="button" value="新增一项"/> <input type="submit" value="提交" style="float:right"/> </td> </tr> </table> </form> </div>
table form 包裹的问题搞死我了