一、在 Form 表单中动态新增、删除项目
在
Web 开发中，使用
form 表单提交数据大家一定不会陌生。但有时表单项数量并不是固定的，比如我们要提交一个人员信息列表，人员数量不定，填写完毕后一次性提交。这就要求表单可以动态地增加或删除输入项。
1，效果图
（1）页面初始化后默认有两个表单项（两个输入框）。
（2）点击“
新增一项”按钮，则在末尾添加一个新的输入条目。
（3）点击“
删除”按钮则将对应的输入条目给删去。
（4）点击“
提交”按钮则将表单中所有的项目进行提交。
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 条数据。从捕获的请求可以看到， 3 条数据都已成功提交。
二、动态新增项目的数据无法提交问题
可能有人碰到数据丢失问题，明明新增的 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>
|
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
218
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
