javascript - onsubmit =“submitForm();”有什么区别and onsubmit =“返回returnForm();”

下面的示例是否意味着该表单将被提交两次？

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

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

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

最佳答案

表单元素上的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 /正常降级这样的事情很常见），那么您需要在事件处理程序中添加return false。

onsubmit="submitForm(); return false"

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

onsubmit="return submitForm();"

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

我推荐前者，在事件处理程序中放置一个显式false。原因是事件处理程序是需要false的原因。提交不是错误的。您没有以某种方式失败或拒绝。 SubmitForm应该专注于提交内容，并让您的事件处理程序处理浏览器事件处理内容。另外，它还对代码进行了防错处理。