最近在完成一个需求的时候,由于不确定选项有多少个,所以就想到了动态添加input并最终合成json存到数据库,之前自己也没做过相关的东西,所以就想利用这次试试能不能做出,最终还是实现了需求,所以也分享代码给大家,供大家参考。
一、HTML端
<!-- *****选项-答案***** -->
<hr>
<div class="form-group" style="text-align: center;">
<button type="button" class="btn btn-success btn-sm" id="addBtn">新增</button>
<button type="button" class="btn btn-danger btn-sm" id="removeBtn">移除</button>
</div>
<div class="optionAnswerParent" id="optionAnswerParent">
<div class="optionAnswer">
<hr/>
<div class="form-group">
<label for="optionListData" class="col-sm-2 control-label">选项</label>
<div class="col-sm-8">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-pencil"></i></span>
<input type="text" class="form-control optionListData" placeholder="输入选项">
</div>
</div>
</div>
<div class="form-group">
<label for="numberListData" class="col-sm-2 control-label">分数</label>
<div class="col-sm-8">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-pencil"></i></span>
<input type="number" class="form-control numberListData" placeholder="输入分数"
value="0">
</div>
</div>
</div>
</div>
</div>
<!-- *****选项-答案***** -->
二、jquery
<script type="application/javascript">
//新增菜单
$("#addBtn").click(function () {
$(".optionAnswerParent").append(" <div class='optionAnswer'><hr/> <div class='form-group'> <label for='optionListData' class='col-sm-2 control-label'>选项"+"<" + "/label> <div class='col-sm-8'> <div class='input-group'> <span class='input-group-addon'><i class='fa fa-pencil'>"+"<" + "/i>"+"<" + "/span> <input type='text' class='form-control optionListData' placeholder='输入选项'> "+"<" + "/div>"+"<" + "/div>"+"<" + "/div> <div class='form-group'> <label for='numberListData' class='col-sm-2 control-label'>分数"+"<" + "/label> <div class='col-sm-8'> <div class='input-group'> <span class='input-group-addon'><i class='fa fa-pencil'>"+"<" + "/i>"+"<" + "/span> <input type='number' class='form-control numberListData' placeholder='输入分数' value='0'>"+"<" + "/div>"+"<" + "/div>"+"<" + "/div>"+"<" + "/div>");
});
//移除菜单
$('#removeBtn').click(function () {
$('div[class=optionAnswer]:last').remove();
});
//提交触发事件
function saveData() {
//初始化数据
optionList = [];
numberList = [];
//循环获取选项数据
$(".optionListData").each(function () {
optionList.push($(this).val());
});
//循环获取分数数据
$(".numberListData").each(function () {
numberList.push($(this).val());
});
//判断是否创建选项
if (optionList.length <= 0) {
layer.msg('请填写选项!');
return false;
}
//数组转JSon提交
optionList = JSON.stringify(optionList);
numberList = JSON.stringify(numberList);
//获取其他要素
var subjectIdData = $('#subjectIdData').val();
var titleData = $('#titleData').val();
var sortData = $('#sortData').val();
//判断用户输入
if (subjectIdData === '') {
layer.msg("请选择题目");
return false;
}
if (titleData === '') {
layer.msg("请输入标题");
return false;
}
//创建API
var url = "API接口";
//提交创建
$.ajax({
method: 'post',
url: url,
data: {
optionList: optionList,
numberList: numberList,
subjectIdData: subjectIdData,
titleData: titleData,
sortData: sortData
},
success: function (res) {
if (res['code'] === 1) {
layer.msg('添加成功!');
window.location.reload();
} else {
layer.msg(res["msg"]);
}
}
});
//
}
</script>
三、PHP接收端
$optionList = $_POST[""]; //选项列表
$numberList = $_POST["numberList"]; //分数列表
//获取选项列表
$optionList = json_decode($optionList, true);
//获取分数列表
$numberList = json_decode($numberList, true);
这样就可以动态添加、删除input并获取值
更多文章请识别以下微信小程序二维码进行查看