javascript - 提交比预期更多字段的 html 表单

Question

我正在处理一个糟糕的问题，我开发了一个包含多个字段集的表单(使用普通的 div) 当我测试提交操作时，我在 URL 中得到了一个未填写的输入，也隐藏在 标记如下所示。

http://127.0.0.1:8000/exform.html?user=test&pwd=QWERT1234&user_reg=    

下面是表单的代码:

<form id="exform">
            <div class="fields" id="login">
                <div class="txt">
                  <label for="user"></label>
                  <input id="user" type="text" name="user"/>
                </div>

                <div class="txt">
                  <label for="pwd"</label>
                  <input id="pwd" type="password" name="pwd"  />
                </div>
                  <input type="submit" value="test" id="test"/>
            </div>

            <div class="fields" id="register">

                <div class="txt">
                  <label for="user_reg"></label>
                  <input id="user_reg" name="user_reg" type="text"/>
                </div>

                <div class="txt">
                  <label for="pwd2"></label>
                  <input id="pwd2" type="password" />
                </div>

                <div class="txt">
                  <label for="pwdc"></label>
                  <input id="pwdc" type="password"/>

                </div>

                <div class="buttons">
                  <input type="submit" value="OK" id="ok"/>
                </div>
            </div>
</form>

奇怪的是第二个字段集在屏幕上不可用，因为在 css 有一条规则只显示第一组“字段”

/*Hide all except first div with class div*/
#exform .fields:not(:first-of-type) {
  display: none;
}

所以我真的很想知道为什么表单会提交超出范围的字段。

例如，如果使用第二个组字段集，当单击提交按钮并返回值 OK 时，产生的结果是相似的。在 URL 中，只有 user_reg 字段参数显示为第一组没有值的另外两个字段:

http://127.0.0.1:8000/exform.html?user=&pwd=&user_reg=test

以下代码用于提交测试:

$(function() {

    $('#test').click(function() {
         $('#exform').submit(function(event) {
           console.log("form Submited:" + document.forms['exform'] + "test");
         });
    });
    $('#ok').click(function() {

         $('#exform').submit(function(event) {
           console.log("form Submited:" + document.forms['exform'] + "ok");
         });
    });
});

没关系，我得到相同的 URL 结果

这个

http://127.0.0.1:8000/exform.html?user=test&pwd=QWERT1234&user_reg=

或

http://127.0.0.1:8000/exform.html?user=&pwd=&user_reg=test

我收到的是:

// on #test click
http://127.0.0.1:8000/exform.html?user=test&pwd=QWERT1234     

// on #ok click
http://127.0.0.1:8000/exform.html?user_reg=test&pwd2=QWERT1234&pwdc=QWERT123 

我无法检索 URL 中 pwd2 和 pwdc 字段的值作为提交后获得的参数。

这让我抓狂。

Answer 1

如果不指定表单的method方法，提交时默认为GET。这就是在您的 URL 中看到所有表单元素的原因。 试试这个:

<form id="exform" method="post">
<!-- form contents -->

参见 here了解详情。