jQuery动态生成input填写时间值并且提交给后端
今天写的一个demo，关于jQuery动态生成input填写时间值并且提交给后端。
需求：1：点击新增按钮的时候，会无限动态生成input输入框，可以输入不同的时间。 2：点击提交按钮的时候，将生成的这些时间提交到后端。
参考代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态生成时间并且提交给后端</title>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
</head>
<body>
<div class="form-group">
<label class="col-md-4 col-sm-4 col-xs-4 control-label">巡更时间
<em style="color: red;">*</em>
</label>
<div class="col-md-8 col-sm-8 col-xs-8">
<input type="text" class="form-control beginTime" name="stime" id="" value="09:00"></input> <input type="text" class="form-control endTime" name="etime" id="" value="17:00"></input>
</div>
</div>
<div id="timeCont"></div>
<div class="row " id="addtimebtn">
<div class="col-md-12 col-sm-12 col-xs-12">
<button type="button" id="fatBtn">新增</button>
</div>
</div>
<button type="submit" id="addBtn">提交</button>
</body>
<script>
/* 新增检测时间 */
$("#fatBtn").click(function() {
var htm = "";
htm += " <div class='form-group'>";
htm += "<label class='col-md-4 col-sm-4 col-xs-4 control-label'>巡更时间<em style='color: red;'>*</em></label>";
htm += "<div class='col-md-8 col-sm-8 col-xs-8'>";
htm += "<input type='text' class='form-control beginTime' name='stime' value='09:00'></input>";
htm += "<input type='text' class='form-control endTime' name='etime' value='17:00'></input></div></div>";
$('#timeCont').append(htm);
});
$("#addBtn").on("click", function() {
var params = {
times: getTimes(),
}
alert(JSON.stringify(params))
$.ajax({
url: "",
contentType: 'application/json',
data: JSON.stringify(params),
type: "POST",
success: function(data) {
}
});
})
//获取时间周期
function getTimes() {
var times = new Array(); //创建list集合
$("input[name='stime']").each(function(i, value) {
var obj = {};
obj.stime = $(this).val();
times.push(obj);
});
$("input[name='etime']").each(function(i, value) {
times[i].etime = $(this).val();
});
return times;
}
</script>
</html>原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019.09.25 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读