onsubmit =" submitForm（）;"有什么区别？和onsubmit =“return submitForm（）;” [英] What is the difference between onsubmit="submitForm();" and onsubmit="return submitForm();"

问题描述

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

 < form name =myFormaction = demo_form.asponsubmit =submitForm（）;方法= POST > 
 
函数submitForm（）{
 document.myForm.submit（）; 
} 
  

我有时会记录两条记录。并且我怀疑它是因为表单提交了两次

解决方案

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

它与任何其他函数相似

 函数isValid（form）{
 if（someBadCondition）{
 //在某处记录一些错误
 return false; 
} 
 if（someHorribleCondition || someEquallyBadCondition）{
 //记录其他错误
 return false; 
} 
返回true; 
} 
 
函数canSubmitForm（form）{
 isValid（form）; 
} 
  

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

  console.log（isValid（someForm））; // true 
 console.log（canSubmitForm（someForm））; // undefined 
  

将onsubmit =submitForm（）视为您的canSubmitForm。这实际上就是这样。无论你在onsubmit =中定义了什么，都会被视为一个函数来回答我们可以提交这个问题吗？这个问题。

你可以修改上面的例子： p>

 函数canSubmitForm（form）{
 return isValid（form）; 
} 
  

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

因此，

  onsubmit =submitForm （）; 
  

和

  onsubmit =return submitForm（）; 
  

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

你很可能会提交表单两次因为你的代码说当提交表单时，提交表单。

如果submitForm javascript函数需要拥有提交过程（通常用于像ajax w /然后你需要在事件处理程序中添加一个返回false。

  onsubmit =submitForm（）; return false 
  

或更改submitForm返回false然后onsubmit传递它

  onsubmit =return submitForm（）; 
 
函数submitForm（）{
 //做一些提交的东西
 return false; 
} 
  

我推荐前者，在事件处理程序中放置一个明确的false。原因是事件处理程序是需要false的原因。提交并不是虚假的。你没有失败或拒绝。 submitForm应该关注提交的东西，并让你的事件处理程序处理浏览器事件处理的东西。再加上它对代码有一定的错误证明。

Does this the example below mean the form will be submitted twice?

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

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

I have a bug which records two of each record sometimes. and i'm suspecting its because the form is submitting twice

解决方案

onsubmit="" on a form element defines an event function. The return value, if defined, will be passed back to the browser. A falsy value (false, null, undefined, etc.) will prevent the browser from proceeding with form submission.

It's similar to any other functions

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);
}

The last line never passes the return value back. Therefore

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

Think of the onsubmit="submitForm()" as being your canSubmitForm. That is actually exactly what it is. Whatever you define in onsubmit="" is evaluated as a function to answer the question "can we submit this?".

You would fix the above example like:

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

Notice the return statement will now pass the result of isValid through to the caller of canSubmitForm.

Therefore, the diffrence between

onsubmit="submitForm();"

and

onsubmit="return submitForm();"

Is that in the former, the return value of submitForm is ignored. In the later example, if submitForm were to return a value, it would be passed to the caller of onsubmit, which is the browser.

You are most likely submitting your form twice because your code says "when submitting the form, submit the form".

If the submitForm javascript function needs to own the submitting process (common for thing like ajax w/ graceful degradation), then you need to add a return false in your event handler.

onsubmit="submitForm(); return false"

or change submitForm to return false and then onsubmit to pass it on

onsubmit="return submitForm();"

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

I recommend the former, where you put an explicit false in the event handler. The reason for that is the event handler is the reason false is needed. Submitting isn't false. You didn't somehow fail or reject. submitForm should focus on submission stuff and let your event handler handle the browser event handling stuff. Plus it error-proofs the code a bit.

这篇关于onsubmit =" submitForm（）;"有什么区别？和onsubmit =“return submitForm（）;”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！