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

只需从“登录”按钮中删除iPhoneX(); window.onresize = window.onorientationchange = function() { //Your other functions setTimeout(iPhoneX,100); } function iPhoneX() { if (window.innerWidth == 375 && window.innerHeight == 812) { if (!document.getElementById('iphone_layout')) { var img = document.createElement('img'); img.id = 'iphone_layout'; img.style.position = 'fixed'; img.style.zIndex = 9999; img.style.pointerEvents = 'none'; img.src = 'img/iphonex.png' document.body.insertBefore(img,document.body.children[0]); } } else if (document.getElementById('iphone_layout')) { document.body.removeChild(document.getElementById('iphone_layout')); } }即可解决问题。

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

Answer 3

是的，正如Sudheesh所说。

您需要删除

onclick=validateLoginCredentials()

或

 type=submit

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

我建议删除

onclick=validateLoginCredentials()

这是最常用的做法。

干杯。

html表单： - onsubmit js函数调用两次

3 个答案: