0

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

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

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

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

4

3 回答 3

3

表单元素上的 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 之类的东西），那么您需要在事件处理程序中添加 return false。

onsubmit="submitForm(); return false"

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

onsubmit="return submitForm();"

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

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

于 2013-05-10T14:14:09.830 回答
1

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

于 2013-05-10T13:58:32.723 回答
1

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

onsubmit="submitForm();return false;"

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

（请注意，在上面的示例中，submitForm 函数实际上并没有做任何事情，所以整个事情都是多余的，但是一旦您解决了双重提交问题，大概您正在计划该函数中的更多逻辑）

于 2013-05-10T14:10:02.613 回答