html form :- onsubmit js function invoked twice

Question

Below is source which I took from html page source:

<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>

When I click on submit button the function validateLoginCredentials() is invoked twice (I noticed this by calling alert('invoked---') ).

Why is this happening?

Answer 1

Because you are invoking it twice, on button click event and on form submit event. Avoid either one to proceed.

Cheers.

Answer 2

Just remove onclick=validateLoginCredentials() from your Login button that will fix the problem.

Background: The problem is that you are telling your form to execute the validateLoginCredentials() function whenever form is submitted. And as your login button is having a type="submit" attribute along with onclick event, as a result the validateLoginCredentials() is called twice, once for submit event and another for onclick event.

Answer 3

Yes, as Sudheesh said.

You need to either remove

onclick=validateLoginCredentials()

or

 type=submit 

When you set button type to submit, it automatically submits the form and there's no need to add any onclick method - this is why it's invoked twice. You can consider additional onclick method if you want to override default behavior.

I'd advise to remove

onclick=validateLoginCredentials()

as that's the most used practice.

Cheers.