Question

下面的例子是否意味着表格会被提交两次？

<form name="myForm" action="demo_form.asp" onsubmit="submitForm();" method="post">

function submitForm(){
   document.myForm.submit();
}

我有一个错误，有时会记录每条记录中的两条。而且我怀疑它是因为表格提交了两次

Answer 1

表单元素上的

onsubmit =“”定义了一个事件函数。返回值（如果已定义）将传递回浏览器。假值（false，null，undefined等）将阻止浏览器继续提交表单。

它类似于任何其他功能

function isValid(form) {
  if (someBadCondition) {
    // record some error somewhere
    return false;
  }
  if (someHorribleCondition || someEquallyBadCondition) {
    // record some other error
    return false;
  }
  return true;
}

function canSubmitForm(form) {
  isValid(form);
}

最后一行永远不会返回返回值。因此

console.log(isValid(someForm));  // true
console.log(canSubmitForm(someForm));  // undefined

将onsubmit =“submitForm（）”视为您的canSubmitForm。这实际上就是它的本质。无论你在onsubmit =“”中定义什么，都会被评估为回答问题的函数“我们可以提交吗？”。

你会修复上面的例子：

function canSubmitForm(form) {
  return isValid(form);
}

请注意，return语句现在将isValid的结果传递给canSubmitForm的调用者。

因此，

之间的差异

onsubmit="submitForm();"

和

onsubmit="return submitForm();"

在前者中，是否忽略了submitForm的返回值。在后面的示例中，如果submitForm要返回一个值，它将被传递给onsubmit的调用者，这是浏览器。

您最有可能两次提交表单，因为您的代码说“在提交表单时，请提交表单”。

如果submitForm javascript函数需要拥有提交过程（对于像ajax w / graceful degrat这样的东西很常见），那么你需要在事件处理程序中添加一个返回false。

onsubmit="submitForm(); return false"

或更改submitForm以返回false，然后onsubmit将其传递给

onsubmit="return submitForm();"

function submitForm() {
  // do some submission stuff
  return false;
}

我推荐前者，在事件处理程序中放置一个显式的false。原因是事件处理程序是需要false的原因。提交并非虚假。你没有以某种方式失败或拒绝。 submitForm应该专注于提交内容，让你的事件处理程序处理浏览器事件处理的东西。此外，它还会对代码进行错误验证。

Answer 2

return语句返回提交时调用的函数的结果。如果返回false，则会停止提交表单。

Answer 3

您提交两次的原因是您既运行提交，又运行您的submitForm函数。如果您想在函数中使用自定义提交逻辑，则需要执行以下操作：

onsubmit =“submitForm（）; return false;”

这样做会运行您的提交功能，但会阻止提交按钮的默认行为。

（请注意，在上面的例子中，submitForm函数并没有真正做任何事情，所以整个事情都是多余的，但是一旦你解决了双重提交问题，你可能会计划在该函数中使用更多逻辑）

onsubmit =“submitForm（）;”之间的区别是什么？和onsubmit =“return submitForm（）;”

3 个答案: