利用模板字符串动态增减多个input框并传值
一、先看效果图：
二、代码截图：
三、代码书写：
<!DOCTYPE html>
<html>
<head>
<title>动态增减input框并传值</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
<script type="text/javascript" src="common.js"></script>
<style type="text/css">
#add1{
margin:20% 50% ;
}
</style>
</head>
<body>
<button class="btn btn-info" id="add1" data-toggle="modal" data-target="#addActive">添加活动任务单</button>
<!-- 模态框 -->
<div class="modal fade" id="addActive" tabindex="-1" role="dialog" aria-labelledby="activeModalLabel">
<div class="modal-dialog modal-lg" style="margin-top: 130px;">
<div class="modal-content integralPart" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="activeModalLabel">新增任务单</h4>
</div>
<div class="modal-body" style="padding: 0px;">
<form class="form_active" id="activetask" name="active_task">
<!-- 主办单位 -->
<div class="col-md-12 form-group">
<label class="col-md-2 col-md-offset-1 control-label" for="active_host_unit">主办单位</label>
<div class="col-md-4">
<input type="text" name="host_unit" class="form-control col-md-4 add_host_unit1" id="active_host_unit" placeholder="请输主办单位名称" value="" maxlength="20">
</div>
<div class="col-md-2" style="margin-top:5px;">
<input type="button" class="btn btn-info add_host_unit" value="+">
</div>
</div>
<!-- 邀请嘉宾 -->
<div class="col-md-12 form-group">
<label class="col-md-2 col-md-offset-1 control-label" for="active_Invite_the_guests">邀请嘉宾</label>
<div class="col-md-4">
<input type="text" name="Invite_the_guests" class="form-control col-md-4 add_the_guests1" id="active_Invite_the_guests" placeholder="请输入邀请嘉宾信息" value="">
</div>
<div class="col-md-2 VerifyImage11" style="margin-top:5px;">
<input type="button" class="btn btn-info add_the_guests" value="+">
</div>
</div>
<!-- 媒体支持 -->
<div class="col-md-12 form-group">
<label class="col-md-2 col-md-offset-1 control-label" for="active_support_of_media">媒体支持</label>
<div class="col-md-4">
<input type="text" name="support_of_media" class="form-control col-md-4 add_of_media1" id="active_support_of_media" placeholder="请输入媒体单位名称" value="">
</div>
<div class="col-md-2 VerifyImage12" style="margin-top:5px;">
<input type="button" class="btn btn-info add_of_media" value="+">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<div style="width:100%;border:1px solid #CCC;margin-top:478px;"></div>
<div class=" col-md-offset-4 control-label" style="margin: -8px 340px;">
<input type="button" class="btn btn-primary put_active" value="创建活动">
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
//函数封装写法
function add_input(str,div_name,pla,img_class){
//添加
$("."+str).click(function(){
//使用模板字符串生成input元素
var div=`<div><div class="col-md-10"> <input type="text" name=${div_name} class="form-control" placeholder=${pla} value="" maxlength="20"></div> <div class="col-md-2"><input type="button" class="btn btn-success ${img_class}" value="-"></div></div>`;
$(this).parent().prev().append(div);
});
//移除
$("."+str).parent().prev().on("click","."+img_class,function(){
$(this).parent().parent().remove();
});
}
/**调用封装的函数**/
//主办单位
add_input("add_host_unit","host_unit","请输主办单位名称","cut_host_unit");
//邀请嘉宾
add_input("add_the_guests","Invite_the_guests","请输入邀请嘉宾信息","cut_the_guests");
//媒体支持
add_input("add_of_media","support_of_media","请输入媒体单位名称","cut_of_media");
/** 未封装写法
//添加主办单位
$(".add_host_unit").click(function(){
var div='<div><div class="col-md-10"> <input type="text" name="host_unit" class="form-control add_host_unit1" placeholder="请输主办单位名称" value="" maxlength="20"></div> <div class="col-md-2"><input type="button" class="btn btn-success cut_host_unit" value="-"></div></div>';
$(this).parent().prev().append(div);
});
//移除主办单位
$(".add_host_unit").parent().prev().on("click",".cut_host_unit",function(){
$(this).parent().parent().remove();
});
//添加邀请嘉宾
$(".add_the_guests").click(function(){
var div='<div><div class="col-md-10"> <input type="text" name="Invite_the_guests" class="form-control add_the_guests1" placeholder="请输入邀请嘉宾信息" value="" maxlength="20"></div> <div class="col-md-2"><input type="button" class="btn btn-success cut_the_guests" value="-"></div></div>';
$(this).parent().prev().append(div);
});
//移除邀请嘉宾
$(".add_the_guests").parent().prev().on("click",".cut_the_guests",function(){
$(this).parent().parent().remove();
});
//添加媒体支持
$(".add_of_media").click(function(){
var div='<div><div class="col-md-10"> <input type="text" name="support_of_media" class="form-control add_of_media1" placeholder="请输入媒体单位名称" value="" maxlength="20"></div> <div class="col-md-2"><input type="button" class="btn btn-success cut_of_media" value="-"></div></div>';
$(this).parent().prev().append(div);
});
//移除媒体支持
$(".add_of_media").parent().prev().on("click",".cut_of_media",function(){
$(this).parent().parent().remove();
});
**/
//创建提交新建的任务单
$(".put_active").on("click",function(){
//调用封装的函数
activeForm('上传数据的url后台接口');
});
//函数封装-提交任务单
function activeForm(url){
//获取主办方填写内容
var result_unit=[];
$("input[name='host_unit']").each(function(i) {result_unit[i]=$(this).val()});
console.log(result_unit,"获取主办方填写内容");
//获取主办单位填写内容
var result_guests=[];
$("input[name='Invite_the_guests']").each(function(i) {result_guests[i]=$(this).val()});
console.log(result_guests,"获取主办单位填写内容");
//获取媒体支持填写内容
var result_media=[];
$("input[name='support_of_media']").each(function(i) {result_media[i]=$(this).val()});
console.log(result_media,"获取主办单位填写内容");
return false;//测试打断, 下面的url仅是参数，如需使用需在调用时，换上真的url后台接口
//验证数据为空:
if(result_unit=="" || result_guests=="" || result_media=="" ){
toast("请先补全信息！");
return false;
}else{
$.ajax({
type:"POST",
url:url,
data:{result_unit:result_unit,result_guests:result_guests,result_media:result_media},
success:function(data){
console.log(data,"data.infor.inviter");
if(data.code==200){
toast(data.msg);
$("#addActive").modal('hide');
}else{
toast(data.msg);
}
},
error:function(err){
toast("请求i错误请检查!");
}
});
}
}
</script>
</body>
</html>
提示：本代码可以直接复制粘贴使用，前提是正确引用jquery.js等插件库。本代码没有提供上传input框数据的接口，大家可以使用自己的后台数据上传接口。由于水平有限，本文档仅供初学者或首次开发者提供 参考。如代码有错误之处，请见谅。如果有更好的开发经验，感谢回复。谢谢观看！！！；