什么触发 HTML 表单提交？答案

【问题标题】：What triggers an HTML form to submit?什么触发 HTML 表单提交？
【发布时间】：2012-08-07 06:40:30
【问题描述】：

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

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

1) 在这种情况下，什么可能会提交表单？

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

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

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

【问题讨论】：

在日历按钮的 onclick 事件中，您需要调用 e.preventDefault() - 大多数按钮将提交表单/页面，除非您明确阻止该默认行为。如果这不起作用，请尝试e.stopPropagation()。
你不能创建一个SSCCE来证明这个问题？
@ŠimeVidas：他说的是专有的；我猜是他或他的公司制造的。
@Mark 这并不意味着它不能公开。毕竟，它是开源的，因为它是一个 JavaScript 脚本。
@ŠimeVidas：在这个意义上可能是“公共的”，但它可能不是我们熟悉的。但我想他可以自己回答:)

标签： javascript jquery html forms

【解决方案1】：

很抱歉回答我自己的问题，但没有一个给出的答案是完整的，尽管我已经从他们和 cmets 那里学到了东西！感谢所有参与的人！

所以：

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

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

处理onsubmit 事件，在未设置标志的情况下阻止提交（通过return false; 或-最好！-通过e.preventDefault();）；在处理应该实际提交表单的事件时设置标志
处理onsubmit 事件并在触发事件的元素不是我们想要提交的元素（之一）时阻止上述提交
将表单操作设置为非操作，即action="#"，并让应该实际提交表单的事件的处理程序将操作设置为正确的地址

【讨论】：

return false 是一个 jQuery 的东西。它同时调用e.preventDefault() 和e.stopPropagation()。回答你自己的问题没问题；感谢您分享您的发现。
感谢您的评论，@Mark。 return false; 不是 jQuery 的东西。它也可以在纯 JavaScript 中工作（也许它不是跨浏览器？我不知道。我刚刚在 Firefox 上尝试过，它可以工作，至少在防止默认情况下）。我写道，preventDefault() 更可取，因为确实return false; 也停止了传播（至少在 jQuery 中。我不确定纯 JavaScript），这不一定是我们所追求的。我们希望阻止默认设置。
很高兴知道，@Mark！因此，return false; 作为一种防止默认设置的方法似乎非常普遍，如果我做对了的话。 jQuery 的特点是它还能阻止冒泡。
是的，看起来是这样。我猜它确实阻止了导航到该链接，因此它阻止了默认操作但没有冒泡。我也学到了一些东西=)

【解决方案2】：

日历可以通过使用 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>

Demo

【讨论】：

我不希望日历提交表单 - 这就是问题所在！感谢您提供有关如何防止提交按钮以外的其他来源提交表单的示例！

【解决方案3】：

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

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

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

( 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 = "...";

} );

【讨论】：

日历代码肯定不会在任何地方调用submit()。感谢您提供有关如何禁用提交的提示！
现在我已经明白<button></button> 按钮提交表单，并且必须使用<input type="button" /> 或<button type="button"></button>...

【解决方案4】：

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

【讨论】：

是的，我知道按 Enter 会提交表单。这就是为什么我问：“2）除了点击提交按钮或按回车键之外，通常会提交哪些表单？”。感谢您提供有关禁用提交的提示。
一般输入并点击提交。当然，第 3 方开发人员可能会根据应用程序连接制表符、空格键或其他此类快捷方式。如果你想控制行为，你必须手动触发submit()

【解决方案5】：

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

【讨论】：