点击提交按钮,提交所有生成的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后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券