HTML 表单 :- onsubmit js 函数调用了两次

Question

以下是我从html页面源代码中获取的来源：

<FORM id=SubmitLogon onsubmit="return validateLoginCredentials()" method=post name=submitLogonForm action=/MyLogin/SubmitLogon.do;jsessionid=s5EXXp3uylxmT10IrEqjlq142HWdNeb-qbeY_q-bTTG2SiuVpY_1!-1968082838 AutoComplete="off">
<TR>
<TD class=logonLabelTdTag>Username&nbsp; </TD>
<TD align=left>
<DIV id=wwgrp_SubmitLogon_username class=wwgrp>
<DIV id=wwctrl_SubmitLogon_username class=wwctrl>
<INPUT onchange="javascript: this.value=this.value.toUpperCase();" tabIndex=1 onfocus="javascript: this.value=this.value.toUpperCase();" id=SubmitLogon_username class=logonTextBox maxLength=40 name=username>
</DIV>
</DIV>
</TD>
</TR>
<TR>
<TD class=logonLabelTdTag>Password&nbsp; </TD>
<TD align=left>
<DIV id=wwgrp_SubmitLogon_password class=wwgrp>
<DIV id=wwctrl_SubmitLogon_password class=wwctrl>
<INPUT tabIndex=2 id=SubmitLogon_password class=logonTextBox maxLength=40 type=password value="" name=password>
</DIV>
</DIV>
</TD>
</TR>
<TR>
<TD colSpan=2 align=right>
<BUTTON onclick=validateLoginCredentials() style="BORDER-TOP-STYLE: none; BORDER-LEFT-STYLE: none; HEIGHT: 39px; WIDTH: 98px; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-BOTTOM-STYLE: none; BORDER-RIGHT-STYLE: none" type=submit value="Login">
<IMG src="/images/btn_login.jpg">
</BUTTON>
</TD>
</TR>
</FORM>
<script>
function validateLoginCredentials() {
alert('invoked---');
}
</script>

当我单击提交按钮时，函数validateLoginCredentials()被调用两次(我通过调用alert('invoked---')注意到了这一点(。

为什么会这样？

Answer 1

因为您要调用它两次，按钮单击事件和表单提交事件。避免任何一个继续。

干杯。

Answer 2

只需从"登录"按钮中删除onclick=validateLoginCredentials()即可解决问题。

背景：问题是您告诉表单在提交表单时执行validateLoginCredentials()函数。由于您的登录按钮具有type="submit"属性以及 onclick 事件，因此validateLoginCredentials()被调用两次，一次用于提交事件，另一次用于 onclick 事件。

Answer 3

是的，正如Sudheesh所说。

您需要删除

onclick=validateLoginCredentials()

或

type=submit 

当您将按钮类型设置为提交时，它会自动提交表单，无需添加任何 onclick 方法 - 这就是它被调用两次的原因。如果要覆盖默认行为，可以考虑其他 onclick 方法。

我建议删除

onclick=validateLoginCredentials()

因为这是最常用的做法。

干杯。