Jq 動態追加并獲取多個form表單的資料-有解無憂

效果圖

需求：有的時候用戶根據不同需要添加多個表單，但是不確定到底添加多少個，所以就需要使用jq實作動態添加多個表單了，也可以洗掉

解決方法：系統默認給兩個form表單，每一個表單都是一個form，而不是兩行共用一個form，動態添加的時候點擊左上角“添加”按鈕，追加的是一個單獨的form，每行都是一個form的好處是可以使用serialize序列化單獨獲取每個form表單的資料，這樣前端容易獲取，后臺也容易處理，

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用戶名注冊</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>

<input type="hidden" name="num">
<input type="submit" id="button" value="添加">
<div id="inp">

  <form id="form1">
    用戶：<input type="text" name="name">
    密碼：<input type="password" name="pwd">
    郵箱：<input type="text" name="email">
  </form><br>

  <form id="form2">
    用戶：<input type="text" name="name">
    密碼：<input type="password" name="pwd">
    郵箱：<input type="text" name="email">
  </form><br>

</div>
<input type="submit" value="提交" id="sub">
</body>

  <script>
    $(document).ready(function () {
      var num = 3 //初始化from id 從3開始
      $("#button").click(function () {
        
          var html = "<form id='form"+num+"'>用戶：<input id='yonghu' name='name' type='text'> 密碼：<input id='mima' name='pwd' type='password'> 郵箱：<input id='youxiang' name='email' type='text'> <input type='button' value='https://www.cnblogs.com/zxf100/p/洗掉'> </form><br>";
          num += 1  //form id 加1

        $("#inp").append(html);   //追加html

        $(":button").click(function () {
          $(this).parent().remove();  //洗掉
        });
        
      });


      $("#sub").click(function (){
        var newData = []  //定義陣列，接收拼接的多個序列化之后的from的值
        // console.log(num-1)
        for (var i = 1; i < num; i++) {
          console.log($("#form"+i).serialize())
          if ($("#form"+i).serialize() !== '') {

            newData.push($("#form"+i).serialize())    //追加陣列  只追加不為空的form（未洗掉的form）
          }
        }
        // console.log(newData)

        $.ajax({
          url:"{:url('test')}",
          type:"POST",
          dataType:"JSON",
          data:{newData:newData},
          success:function (data) {
            console.log(data)
            // selss = data.data
          }
        })
      })

    });
  </script>


</html>

后臺 Thinkphp5

public function test()
    {
        if (request()->isPost()) {
            $data = input('post.');
            $newData = array();

            foreach ($data['newData'] as $key => $value) {
                // 把查詢字串決議到變數 newData 中
                parse_str($value,$newData);

                // 插入資料庫
                p($newData);
            }

        }else{

        return $this->fetch();
        }
    }

前端列印資料

后臺列印的資料

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/4013.html

標籤：jQuery

上一篇：HTML屬性及其相關區別

下一篇：java 檔案上傳