点击提交按钮，提交所有生成的input参数
今天晚上加班，又写了一些很基础的东西，感觉到自己的js基础还是很差的，对于数据结构上的理解还差了很多火候。
这里主要实现了一些小功能，点击添加按钮的时候，自动生成input框，并且设定限制个数，最多不超过3个，当class字段超过3个的时候，就不继续往下执行程序了。然后点击提交按钮的时候，把input框里面所有的值提交到后端，可以在控制台打印出来查看所提交的字段。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div><span style="font-size: 24px" onclick="addOne()">+</span></div>
<div>
<input type="text" name="" class="start" value="08:00">
<input type="text" name="" class="end" value="08:30">
</div>
<div>
<input type="text" name="" class="start" value="08:30">
<input type="text" name="" class="end" value="09:00">
</div>
<div><button onclick="submit()">submit</button></div>
</div>
<script type="text/javascript">
function addOne(){
if($('.start').length > 2){
return alert('时间超过三个了')
}
var lis = '';
lis += '<div><input type="text" name="" class="start" value=""><input type="text" name="" class="end" value=""></div>'
$('.container').append(lis)
}
function submit(){
var startDivs = $('.start');
var params = {};
var timeArr = [];
var url = '';
for(var i = 0; i < startDivs.length; i++){
var start = $(startDivs[i]).val();
var end = $(startDivs[i]).next('input.end').val();
var tmpObj = {};
tmpObj.start = start;
tmpObj.end = end;
timeArr.push(tmpObj);
}
alert(JSON.stringify(timeArr));
params.timeArr = timeArr;
$.post(url, params,function(rtn){
if(rtn.code === 200){
return true;
}else{
return false;
}
})
}
$(function(){
console.log($('.start').length);
})
</script>
</body>
</html>原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1 90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019.07.08 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读