欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Jq 动态追加并获取多个form表单的数据

程序员文章站 2022-03-10 18:20:50
效果图 需求:有的时候用户根据不同需要添加多个表单,但是不确定到底添加多少个,所以就需要使用jq实现动态添加多个表单了,也可以删除 解决方法:系统默认给两个form表单,每一个表单都是一个form,而不是两行共用一个form,动态添加的时候点击左上角“添加”按钮,追加的是一个单独的form,每行都是 ......

效果图

 

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='删除'> </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();
        }
    }

前端打印数据

Jq 动态追加并获取多个form表单的数据

 

后台打印的数据

Jq 动态追加并获取多个form表单的数据