在提交之前如何做一些事情？答案

【问题标题】：How to do something before on submit?在提交之前如何做一些事情？
【发布时间】：2011-11-08 16:04:42
【问题描述】：

我有一个表单，它有一个提交表单的按钮。在提交之前我需要做一些事情。我尝试在该按钮上执行 onClick，但它发生在提交之后。

我无法共享代码，但一般来说，我应该在 jQuery 或 JS 中做什么来处理这个问题？

【问题讨论】：

咳嗽 jsFiddle Example 咳嗽
@Brad Christie 如果我能接受评论作为答案。谢谢，很有帮助。
我讨厌 stackover 关闭一个问题。您可以使用在提交表单之前在以下时间触发的以下事件来处理您的操作：1- onmouseover 2- onmousemove 3- onmousedown 4- onfocus 5- onmouseup 6- onclick 7- onsubmit
我很欣赏这个问题，因为我最近遇到了同样的问题，这个问题正是我想问的。
有趣的是这个问题被关闭了，因为它不是一个真正的问题：-？

【解决方案1】：

如果你有这样的表格：

<form id="myform">
...
</form>

您可以在表单提交之前使用以下 jQuery 代码做一些事情：

$('#myform').submit(function() {
    // DO STUFF...
    return true; // return false to cancel form action
});

【讨论】：

我在使用这个 for 循环时遇到了麻烦，这些循环必须在提交之前完成。有什么建议吗？
有代码要查看吗？不确定我是否理解问题。
为什么这个包裹在一个空的函数调用中？ submit 函数不应该能够直接绑定到 $('#form') 而没有周围的空函数吗？编辑：the docs suggest that the surrounding function call is not needed.
@eykanal 好点。在确认删除函数包装后它确实可以正常工作后，我继续编辑答案以删除函数包装器。
@eykanal 我使用了“空”函数调用，因为这是 jQuery 的 $(document).ready() 函数的简写，它可以确保在附加 submit 事件之前 DOM 是完整的。如果您的 JS 在页面底部，则没有必要，但如果它在 <head> 部分，那么您需要它。见：stackoverflow.com/q/13062246/135108

【解决方案2】：

假设你有这样的表格：

<form id="myForm" action="foo.php" method="post">
   <input type="text" value="" />
   <input type="submit" value="submit form" />

</form>

您可以像这样使用 jQuery 附加onsubmit-event：

$('#myForm').submit(function() {
  alert('Handler for .submit() called.');
  return false;
});

如果你return false在函数之后不会提交表单，如果你返回true或nothing它会照常提交。

请参阅jQuery documentation 了解更多信息。

【讨论】：

【解决方案3】：

在提交表单之前，您可以使用onclick 运行一些 JavaScript 或 jQuery 代码，如下所示：

<script type="text/javascript">
    beforeSubmit = function(){
        if (1 == 1){
            //your before submit logic
        }        
        $("#formid").submit();            
    }
</script>
<input type="button" value="Click" onclick="beforeSubmit();" />

【讨论】：

但这不起作用，当表单包含例如用户正在点击触发提交事件的返回键的输入字段。通常最好直接附加到提交事件，这样您就可以确保无论用户如何触发提交，它都会被调用。
@Ansyori 那更糟！

【解决方案4】：

确保提交按钮不是“提交”类型，将其设为按钮。然后使用 onclick 事件触发一些 javascript。在那里，您可以在实际发布数据之前做任何您想做的事情。

【讨论】：

可以通过多种方式提交表单，例如在某些字段中按回车键。绑定到一个可能没有被点击的按钮上的点击不是一个好主意。其他答案显示了您如何绑定 form 的onsubmit，无论表单如何提交都会触发。
令人惊讶的是，在 2021 年，type="submit" 中的 onClick 是通过执行任何最终会导致 form.submit() 操作的操作触发的。在 Firefox、Chrome 和 Brave 上的输入字段上按 Enter 即可使用。谁知道十年前是不是这样。