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

最新推荐文章于 2024-09-25 15:18:17 发布

chen072086

最新推荐文章于 2024-09-25 15:18:17 发布

阅读量1.9k

点赞数 1

分类专栏： js 为table添加行

js 为table添加行专栏收录该内容

2 篇文章

订阅专栏

一、在 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>

原文出自：www.hangge.com 转载请保留原文链接：http://www.hangge.com/blog/cache/detail_1650.html