如何在提交之前执行某些操作？

Question

如何在提交之前执行某些操作？

javascriptjqueryhtml

184

我有一个表单，其中有一个按钮可以提交表单。在提交之前我需要做一些事情。我尝试在那个按钮上使用onClick，但它发生在提交之后。

我无法分享代码，但通常来说，在jQuery或JS中应该怎么处理呢？

- Jimmy

2

@Brad Christie 如果我能把评论作为答案接受就好了。非常感谢，帮了我大忙。 - Jimmy

7

我讨厌 Stackover 关闭问题。在提交表单之前，可以使用以下事件来处理您的操作，它们会在以下时间触发： 1- onmouseover 2- onmousemove 3- onmousedown 4- onfocus 5- onmouseup 6- onclick 7- onsubmit。 - Shadi Alnamrouti

在纯JS/HTML中：<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">... 使用'onsubmit'。 - Manatax

你不必分享代码，你可以发送一个示例来说明你的问题。否则，为什么你不能独自解决自己的问题？ - webs

“很难确定这里在问什么。”真是太有趣了。一个带有153个投票，14个书签和221个投票答案的封闭问题...而且还在不断增加。 - Luke

6个回答

27

假设你有一个像这样的表单：

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

</form>

你可以像这样使用jQuery添加onsubmit事件：

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

如果你使用 return false，则在函数执行后表单将不会被提交；如果你返回 true 或什么都不返回，则表单将像平常一样被提交。

有关更多信息，请参见jQuery 文档。

- acme

12

您可以使用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();" />

- James Johnson

25

但是，当表单包含例如输入字段并且用户按下回车键时触发提交事件时，这种方法就不起作用了。通常最好直接附加到提交事件，以便您可以确保无论用户如何触发提交，都会调用该事件。 - acme

2

<input type="submit" value="Click" onmouseover="beforeSubmit();" /> - Ansyori

6

@Ansyori 这甚至更糟糕！ - Dai

你可以按下回车键提交，不需要点击任何东西。 - mileusna

6

表单：

<form id="formId" action="/" method="POST" onsubmit="prepareForm()">
   <input type="text" value="" />
   <input type="submit" value="Submit" />
</form>

Javascript文件：

function prepareForm(event) {
  event.preventDefault();
  // Do something you need
  document.getElementById("formId").requestSubmit();
}

注意：如果你需要支持Safari浏览器（很可能需要），你需要引入一个用于requestSubmit()的填充库

- Yurii Stefaniuk

对我来说，在Chrome中也无法工作。 - bareMetal

5

确保提交按钮不是“submit”类型，将其设置为按键。然后使用onclick事件触发一些JavaScript。在此之前，您可以在实际发布数据之前执行任何操作。

- rogerlsmith

8

表单可以通过多种方式提交，例如在某些字段中按Enter键。绑定到一个可能无法被点击的按钮的单击事件并不是一个好主意。其他答案展示了如何将onsubmit绑定到表单，这样无论以何种方式提交表单都会触发它。 - Jason

3

令人惊讶的是，在2021年，type="submit"的onClick会被任何最终导致form.submit()操作的行为触发。在Firefox、Chrome和Brave上，通过在输入字段上按Enter键可以实现此功能。谁知道十年前是否也是这样。 - HoldOffHunger

0

最近我遇到了这个问题，我用以下方法解决了它。

你的表单：

<form id="deleteForm" action="/post/delete" method="post">
  <input type="text" value="2133" />
  <input type="submit" value="Delete" />
</form>

和你的 JavaScript：

<script>
let deleteForm = document.getElementById('deleteForm');

  deleteForm.addEventListener('submit', function(e) {
    e.preventDefault();
    if (confirm('Are you sure?')) {
        deleteForm.submit();
    }
  });
});

</script>

- Reza Hadipour

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dan Breen · Accepted Answer

如果你有这样的一个表单：

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

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

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

更新：对于较新版本的 JQuery（为了避免废弃警告），请尝试使用以下代码：

$('#myform').on('submit', function() {

    // ...

    return true;
});