想做一个动态添加表单的,并提交数据的效果
点击新增一项可以增加一行数据,这样动态的添加文本框。动态添加已经实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态增加表单并提交数据</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
#container{
width:680px;
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 = 1;
$(function () {
//新增按钮点击
$('#addVar').on('click', function(){
varCount++;
$node = '<p><label for="var'+varCount+'">姓名 '+varCount+': </label> '
+ '<input type="text" name="var'+varCount+'" id="var'+varCount+'"> '
+'<label for="var'+varCount+'">选课:</label> '
+ '<input type="text" name="varke'+varCount+'" id="varke'+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 action="post.php" method="post" id="myForm">
<p>
<label for="var1">姓名 1:</label>
<input type="text" name="var1" id="var1">
<label for="varke">选课:</label> <input type="text" name="varke1" id="varke1">
<span class="removeVar">删除</span>
</p>
<p><span id="addVar">新增一项</span></p>
<p class="alignRight"><input type="submit" value="提交"></p>
</form>
</div>
</body>
</html>不知道如何将添加多行后点击提交后一次性将几行数据添加到数据表中。比如有下面数据点提交将几组数据一次提交完成。
点击新增一项可以增加一行数据,这样动态的添加文本框。动态添加已经实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态增加表单并提交数据</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
#container{
width:680px;
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 = 1;
$(function () {
//新增按钮点击
$('#addVar').on('click', function(){
varCount++;
$node = '<p><label for="var'+varCount+'">姓名 '+varCount+': </label> '
+ '<input type="text" name="var'+varCount+'" id="var'+varCount+'"> '
+'<label for="var'+varCount+'">选课:</label> '
+ '<input type="text" name="varke'+varCount+'" id="varke'+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 action="post.php" method="post" id="myForm">
<p>
<label for="var1">姓名 1:</label>
<input type="text" name="var1" id="var1">
<label for="varke">选课:</label> <input type="text" name="varke1" id="varke1">
<span class="removeVar">删除</span>
</p>
<p><span id="addVar">新增一项</span></p>
<p class="alignRight"><input type="submit" value="提交"></p>
</form>
</div>
</body>
</html>不知道如何将添加多行后点击提交后一次性将几行数据添加到数据表中。比如有下面数据点提交将几组数据一次提交完成。
后台直接用$_POST['name']获取姓名的数组值,$_POST['name1']获取第二个,然后进行循环
例如
foreach($_POST['name'] as $k=>$v){
$v//名称
$_POST['name1'][$k]//选课
//你要用值干嘛就是你自己去做了
}