Question

我正在尝试触发表单提交并使用jquery处理它。下面是我的代码：

<html>
<body>
    <form>
        <input value="hello" name="check">
        <input type="submit" value="abc">
    </form>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $("form").trigger("submit", (event) => {
        console.log(event)
        event.preventDefault();
    })
</script>

</html>

但是，当我运行此代码时，我的表单将无限循环地提交。我期望控制台打印事件对象并停止提交事件。我的代码有什么问题，我该如何解决？

Answer 1

trigger调用的第二个参数不带函数，因此很遗憾，您不能以这种方式使用preventDeafult。 trigger的第二个参数接受额外的参数，这些参数将传递到处理程序中。

但是，您可以编写另一段代码来拦截表单提交：

// this code handles the event from the form submission
$('form').submit(e => {
  e.preventDefault();
  console.log('Within submit');
});

// this codes triggers the form submission
$("form").trigger("submit")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
    <input value="hello" name="check">
    <input type="submit" value="abc">
</form>

要扩展trigger的第二个参数的工作方式，下面的示例显示了已传递到submit函数中的参数。您可以看到传递给trigger的数组的每个项目以及实际事件都已作为submit的参数传递。

// this code handles the event from the form submission
$('form').submit(function(e) {
  e.preventDefault();
  console.log('Within submit');
  console.dir(arguments);
});

// this codes triggers the form submission
$("form").trigger("submit", ['more', 'arguments', 'for', 'submit'])

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
    <input value="hello" name="check">
    <input type="submit" value="abc">
</form>

Answer 2

jQuery submit()函数在用户尝试提交表单时触发。 jQuery提交表单方法附加了一个处理程序，该处理程序在触发Submit事件时执行。

使用jQuery submit()函数提交表单的语法：

jQuery .submit() API documentation

jQuery .submit() simple example

使用此签名时不带任何参数。此方法是.trigger( "submit" )的快捷方式。

它用作(DOM_OBJECT).submit(handler)

其中处理程序是函数，在提交表单时执行。此方法是.on( "submit", handler )的快捷方式。

以下示例演示了submit()函数在使用jQuery提交表单中的用法。

$("form").submit(function(event) {
$("span").text("Submitted Successfully...").show();
event.preventDefault();
});

您可能已经在上面的代码中注意到event.preventDefault()。如果删除此行后再尝试上述示例，则会看到警报。我们使用alert()方法作为默认操作。因此，代码中必须使用event.preventDefault()来阻止此默认操作。

如何在jQuery中触发和处理表单提交？

2 个答案: