返回 导航

其他

hangge.com

jQuery - 动态添加、删除form表单项（附：新增项数据无法提交问题解决）

作者：hangge | 2017-05-27 08:10

一、在 Form 表单中动态新增、删除项目

在 Web 开发中，使用 form 表单提交数据大家一定不会陌生。但有时表单项数量并不是固定的，比如我们要提交一个人员信息列表，人员数量不定，填写完毕后一次性提交。这就要求表单可以动态地增加或删除输入项。

1，效果图

（1）页面初始化后默认有两个表单项（两个输入框）。
（2）点击“新增一项”按钮，则在末尾添加一个新的输入条目。
（3）点击“删除”按钮则将对应的输入条目给删去。
（4）点击“提交”按钮则将表单中所有的项目进行提交。

2，样例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>hangge.comm</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <style>
        #container{
            width:380px;
            margin:20px auto;
            padding:15px;
            background-color:#eee;
          border-radius: 15px;
        }
        /** 新增按钮 **/
        #addVar{
            margin:0 0 0 52px;
            padding:5px;
            display:inline-block;
            background-color:#3A9668;
            color:#f1f1f1;
            border:1px solid #005;
            border-radius: 4px;
        }
        /** 删除按钮 **/
        .removeVar{
            margin:auto;
            padding:5px;
            display:inline-block;
            background-color:#B02109;
            color:#f1f1f1;
            border:1px solid #005;
          border-radius: 4px;
        }

        #addVar:hover, .removeVar:hover{
            cursor: pointer;
        }

        .alignRight{
            text-align: right;
        }

        input, textarea{
            padding:5px;
            font-size: 16px;
        }
    </style>
    <script>
        //初始参数个数
        var varCount = 2;

        $(function () {
          //新增按钮点击
            $('#addVar').on('click', function(){
                varCount++;
                $node = '<p><label for="var'+varCount+'">项目 '+varCount+': </label>'
                  + '<input type="text" name="var'+varCount+'" id="var'+varCount+'">'
                  + '<span class="removeVar">删除</span></p>';
            //新表单项添加到“新增”按钮前面
                $(this).parent().before($node);
            });

          //删除按钮点击
          $('form').on('click', '.removeVar', function(){
            $(this).parent().remove();
            //varCount--;
          });
        });
    </script>
</head>
<body>
    <div id="container">
      <form id="myForm" method="post">
        <p>
          <label for="var1">项目 1: </label>
          <input type="text" name="var1" id="var1">
          <span class="removeVar">删除</span>
        </p>
        <p>
          <label for="var2">项目 2: </label>
          <input type="text" name="var2" id="var2">
          <span class="removeVar">删除</span>
        </p>
        <p><span id="addVar">新增一项</span></p>
        <p class="alignRight"><input type="submit" value="提交"></p>
      </form>
    </div>
</body>
</html>

3，运行效果

这里我新增一个条目，一个提交 3 条数据。从捕获的请求可以看到，3 条数据都已成功提交。

二、动态新增项目的数据无法提交问题

可能有人碰到数据丢失问题，明明新增的 input 元素是在 Form 内部，界面上也能显示，可提交的时候这个 input 数据却带不过去。下面通过样例进行解释。

1，问题样例

可能有人喜欢表单使用 table 进行布局。比如我们在 form 外包裹个 table，然后动态新增的项目插入到 td。具体代码如下：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>hangge.comm</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <style>
        #container{
            width:270px;
            margin:20px auto;
            padding:15px;
            background-color:#eee;
          border-radius: 15px;
        }

        button, input, textarea{
            padding:5px;
            font-size: 16px;
        }
    </style>
    <script>
        //初始参数个数
        var varCount = 2;

        $(function () {
          //新增按钮点击
            $('#addVar').on('click', function(){
                varCount++;
                $node = '<p><label for="var'+varCount+'">项目 '+varCount+': </label>'
                  + '<input type="text" name="var'+varCount+'" id="var'+varCount+'"></p>';
                  //新表单项添加到td中
                $("#myTd").append($node);
            });
        });
    </script>
</head>
<body>
  <div id="container">
      <table id="myTable">
        <form id="myForm" method="post">
          <tr>
            <td id="myTd">
              <p><label for="var1">项目 1: </label><input type="text" name="var1" id="var1"></p>
              <p><label for="var2">项目 2: </label><input type="text" name="var2" id="var2"></p>
            </td>
          </tr>
          <tr>
            <td>
              <input id="addVar" type="button" value="新增一项"/>
              <input type="submit" value="提交" style="float:right"/>
            </td>
          </tr>
        </form>
      </table>
  </div>
</body>
</html>
这次我们同样提交3条数据（默认两个，新增一个）。抓取数据后发现，新添加的那个表单项数据并没有随表单一起提交。


2，问题解决

这个问题比较奇葩。我们将 form 与 table 层次调整下便能解决问题，将原来的 table 包裹 from，改成 form 包裹 table 即可。
<div id="container">
  <form id="myForm" method="post">
    <table id="myTable">
      <tr>
        <td id="myTd">
          <p><label for="var1">项目 1: </label><input type="text" name="var1" id="var1"></p>
          <p><label for="var2">项目 2: </label><input type="text" name="var2" id="var2"></p>
        </td>
      </tr>
      <tr>
        <td>
          <input id="addVar" type="button" value="新增一项"/>
          <input type="submit" value="提交" style="float:right"/>
        </td>
      </tr>
    </table>
  </form>
</div>
评论

全部评论（1）

回到顶部