在提交之前如何做一些事情?

IT技术 javascript jquery html
2021-03-13 18:07:15

我有一个表单,它有一个提交表单的按钮。我需要在提交之前做一些事情。我试着在那个按钮上onClick但它发生在提交之后。

我不能分享代码,但一般来说,我应该在 jQuery 或 JS 中做什么来处理这个问题?

4个回答

如果您有这样的表格:

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

您可以使用以下 jQuery 代码在提交表单之前执行某些操作:

$('#myform').submit(function() {
    // DO STUFF...
    return true; // return false to cancel form action
});
@eykanal 我使用了“空”函数调用,因为这是 jQuery$(document).ready()函数的简写,它确保在附加submit事件之前 DOM 是完整的如果您的 JS 在页面底部,则没有必要,但是如果它在<head>部分中,那么您需要它。参见:stackoverflow.com/q/13062246/135108
2021-04-24 18:07:15
有什么代码可以看吗?不知道我理解这个问题。
2021-05-03 18:07:15
@eykanal 好点。在确认它确实可以正常工作后,我继续编辑答案以删除函数包装器。
2021-05-03 18:07:15
我在使用必须在提交之前完成的 for 循环时遇到了麻烦。有什么建议?
2021-05-08 18:07:15
为什么 this 被包裹在一个空的函数调用中?如果不是submit功能能够直接绑定到$('#form')周围无虚函数?编辑:文档建议不需要周围的函数调用
2021-05-15 18:07:15

假设你有一个这样的表格:

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

</form>

您可以onsubmit像这样使用 jQuery附加一个-event:

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

如果您return false在函数之后不会提交表单,如果您返回 true 或什么都不提交,它将照常提交。

有关更多信息,请参阅jQuery 文档

您可以使用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();" />
但这不起作用,当表单包含例如一个输入字段时,用户正在点击触发提交事件的返回键。通常最好直接附加到提交事件,这样您就可以确保无论用户如何触发提交都可以调用它。
2021-05-01 18:07:15
@Ansyori 那更糟!
2021-05-04 18:07:15
<input type="submit" value="点击" onmouseover="beforeSubmit();" />
2021-05-17 18:07:15

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

出人意料的是,这里在2021年,onClicktype="submit"是做任何事情,无论如何都会最终导致form.submit()动作触发。在 Firefox、Chrome 和 Brave 上的输入字段上按 Enter 即可使用。谁知道十年前是不是这样。
2021-04-21 18:07:15
可以通过多种方式提交表单,例如在某些字段中按 Enter。绑定到一个可能不会被点击的按钮上的点击不是一个好主意。其他答案告诉你如何绑定onsubmit了的形式,这将火无论形式如何提交。
2021-04-27 18:07:15