PHP
PHP动态添加input并获取值
jQuery动态添加input并获取值提交到后端
最近在完成一个需求的时候，由于不确定选项有多少个，所以就想到了动态添加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并获取值
0条评论