触发 HTML 表单提交的原因

What triggers an HTML form to submit?

本文关键字：表单提交 HTML 触发      更新时间：2023-09-26

对于无法提供任何实际代码，我提前道歉，因为问题出现在当前私有的页面中：-/请耐心等待。

我有一个 HTML 表单。我将一个（专有）日历小部件附加到其中一个文本输入字段。当用户按 Tab 键进入该字段时，将显示日历。日历上有几个按钮（移动到上个月/下个月）。当用户单击其中一个按钮时，日历会相应地更新自己，而且 - 表单提交！日历代码中除了日历本身及其附加到的文本输入字段之外，没有任何内容涉及任何其他内容，更不用说提交表单了！我将不胜感激有关以下任何问题的任何线索：

1）在这种情况下，什么可能提交表格？

2）除了点击提交按钮或按回车键之外，通常还有哪些事情提交表单？（特别是普通按钮会提交表格吗？在什么情况下？

3）作为万一我无法解决这个问题的解决方法，有没有办法简单地完全禁用提交表单（然后在附加到提交密钥的事件处理程序中重新启用它）？

注意：日历的行为与此不同 - 正常响应关键事件和单击日期本身的事件（不是按钮）。我在Firefox和Chrome上都尝试过这个，并得到了相同的行为。我尝试使用 FireBug 逐步遵循点击事件处理程序，一切似乎都非常正常 - 但是当它完成时，表单被提交（并且页面重新加载）。该小部件使用 jQuery 1.7.2。任何有助于理解和/或解决此问题的帮助将不胜感激！

很抱歉回答我自己的问题，但给出的答案都不完整，即使我从他们和评论中学到了东西！感谢所有参与的人！

所以：

1+2）由 <button> 元素定义的按钮会导致提交（就像它们设置了type="submit"一样。至少在某些浏览器中）。如果想要一个按钮不会导致提交，应该使用<button type="button">，或者旧的<input type="button" />。

3）（现在对我来说没有必要，但这是问题的一部分。有许多方法可以阻止表单提交。其中三个是：

  • 处理onsubmit事件，阻止提交（通过return false;或 - 最好是！- 通过e.preventDefault();）以防未设置标志; 在处理应实际提交表单的事件时设置标志

  • 处理onsubmit事件并防止如上所述提交，如果触发事件的元素不是我们想要导致提交的元素之一

  • 将表单操作设置为非操作，即 action="#"，并让应实际提交表单的事件的处理程序将操作设置为正确的地址

日历可以通过使用 jQuery 或纯 JavaScript 调用表单的 submit（） 方法来在其 JavaScript 源代码中提交表单。

下面是一个如何禁用表单提交并仅在按下按钮的情况下允许它的示例。

<form id="form">
    <input type="text" />
    <input type="button" name="submit-button" value="Submit"/>
</form>​
<script type="text/javascript">
    var form = document.getElementById('form'),
        button = form['submit-button'];
    form.onsubmit = function(e) {
        return !!form.getAttribute('data-allow-submit');
    };
    button.onclick = function() {
        form.setAttribute('data-allow-submit', 1);
        form.submit();
    };
</script>

演示

日历代码没有在某处调用submit()？

3）作为万一我无法解决这个问题的解决方法，有没有办法简单地完全禁用提交表单（然后在附加到提交密钥的事件处理程序中重新启用它）？

不幸的是，我不完全确定在表单submit事件之前调用click处理程序是否可靠。

( function () {
  var prevent_submit = true;
  $( "form" ).on( 'submit', function ( event ) {
    if ( prevent_submit ) {
      event.preventDefault();
    }
  } );

  $( "input[type='submit']" ).on( 'click', function ( event ) {
    prevent_submit = false;
  } );
} )();

或

$( "form" ).attr( { action : "#", method : "post" } );
$( "input[type='submit']" ).on( 'click', function ( event ) {
  event.target.form.action = "...";
} );

按文本字段的回车键有时会触发表单提交。看这里。特别是如果这是表单中唯一的元素。控制回发的一种方法是将操作设置为空，并使用 Javascript 自己触发事件。

检查结束表单标签的位置。我曾经遇到过这个问题，我终于发现表单本身中有一些"权限"代码阻止用户到达结束标签，因为他没有适当的权限级别来提交它。实际上，这留下了一个打开的表单标签，然后响应同一页面上其他位置的其他按钮。

相关文章：