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中有一条规则只显示第一组“field”类

/*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");
         });
    });
});

无所谓我有相同的网址结果

此

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。

Answer 2

当您提交表单时，您可以在其中提交所有输入字段。

即使你用css隐藏某些东西，它仍然存在于html中。

当您处理表单时，您可以添加一个隐藏字段“input type =”hidden“”，并为该字段指定一个值，告诉您希望在女巫案例中处理的脚本字段。

我还认为post方法更好（更安全），特别是如果你发送密码。

html表单提交的字段数超出预期

2 个答案: