jQuery动态生成input填写时间值并且提交给后端

Arce

今天写的一个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>

原文作者：祈澈姑娘
90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚

[jQuery] jQuery动态生成input填写时间值并且提交给后端

相关帖子

win10系统自带怎么重装？

桌面时间显示不见了按哪里找

电脑屏保时间设置方法

动态尺寸模型优化实践之Shape Constraint IR Part II

SQLite 基本命令使用方式

HTML5 placeholder美化input背景提示文字

HTML5 input新增的几种类型（数字、日期、颜色选取、范围）

使用HTML/CSS/JS做一个恋爱计时小挂件

常用jquery右健禁止命令

基于python的动态时钟，带十二时辰和经络养身

Arce LV4