jQuery - 动态添加、删除form表单项(附:新增项数据无法提交问题解决)

一、在 Form 表单中动态新增、删除项目

在  Web 开发中,使用  form 表单提交数据大家一定不会陌生。但有时表单项数量并不是固定的,比如我们要提交一个人员信息列表,人员数量不定,填写完毕后一次性提交。这就要求表单可以动态地增加或删除输入项。

1,效果图

(1)页面初始化后默认有两个表单项(两个输入框)。
(2)点击“ 新增一项”按钮,则在末尾添加一个新的输入条目。
(3)点击“ 删除”按钮则将对应的输入条目给删去。
(4)点击“ 提交”按钮则将表单中所有的项目进行提交。
原文:jQuery - 动态添加、删除form表单项(附:新增项数据无法提交问题解决)

2,样例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html>
<head>
     <meta charset= "utf-8" >
     <title>hangge.comm</title>
     <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  条数据。从捕获的请求可以看到, 条数据都已成功提交。
原文:jQuery - 动态添加、删除form表单项(附:新增项数据无法提交问题解决) 原文:jQuery - 动态添加、删除form表单项(附:新增项数据无法提交问题解决)

二、动态新增项目的数据无法提交问题

可能有人碰到数据丢失问题,明明新增的  input  元素是在  Form  内部,界面上也能显示,可提交的时候这个  input  数据却带不过去。下面通过样例进行解释。 

1,问题样例

可能有人喜欢表单使用  table 进行布局。比如我们在  form 外包裹个  table,然后动态新增的项目插入到  td。具体代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html>
<head>
     <meta charset= "utf-8" >
     <title>hangge.comm</title>
     <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 条数据(默认两个,新增一个)。抓取数据后发现,新添加的那个表单项数据并没有随表单一起提交。
原文:jQuery - 动态添加、删除form表单项(附:新增项数据无法提交问题解决) 原文:jQuery - 动态添加、删除form表单项(附:新增项数据无法提交问题解决)

2,问题解决

这个问题比较奇葩。我们将  form 与  table 层次调整下便能解决问题,将原来的  table 包裹  from,改成  form 包裹  table 即可。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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>

原文出自: www.hangge.com   转载请保留原文链接: http://www.hangge.com/blog/cache/detail_1650.html
  • 2
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值