按Enter键时触发了两个事件

Question

In my code, I have the following javascript code block in the header section

    function validateForm(bid) {
        switch (bid) {
        case "submitIDSearch":
            alert("submitIDSearch");
            return false;
        case "submitNameSearch":
            alert("submitNameSearch");
            return false;
        }
    }
    function fKeyDown(e) {
        var  kc = window.event ? window.event.keyCode : e.which;
        if (kc == 13) {
            document.getElementById('submitNameSearch').click();
        }
    }

Then I have the following HTML code block

    <form name="checkAbsenceForm" method="post" action="absenceReport.htm" onsubmit="return validateForm(this.submited)">
        <label class="q">ID * <input id="searchRUID" name="searchID" maxlength="9" /></label>
        <input id="submitIDSearch" type="submit" value="Search ID" onclick="this.form.submited = this.id;" />
        <hr />
        <label class="q">First Name <input id="searchFirstName" name="searchFirstName" maxlength="23" onKeyDown="javascript:fKeyDown(event);"/></label>
        <br />
        <label class="q">Last Name * <input id="searchLastName" name="searchLastName" maxlength="23" onKeyDown="javascript:fKeyDown(event);" /></label>
        <input id="submitNameSearch" type="submit" value="Search Name" onclick="this.form.submited = this.id;" />
    </form>

What happened was that when I press Enter key in the searchLastName input text box, both alert message box pops up. One showing submitNameSearch and the other showing submitIDSearch . submitNameSearch is the desired event, but submitIDSearch is not, I think it is somehow triggered by default.

May I ask if there's a way to get rid of the submitIDSearch event when I press Enter key in the searchLastName input text box?

Thanks a lot!

Answer 1

When you press Enter in a form, the form is submitted. That's the reason of the second call to validateForm .

Two solutions :

1) Remove the onKeyDown="javascript:fKeyDown(event);" to have the normal validation defined on onsubmit=... apply.

2) In fKeyDown , add e.preventDefault(); to prevent the default handling of the key event :

function fKeyDown(e) {
    var  kc = window.event ? window.event.keyCode : e.which;
    if (kc == 13) {
        document.getElementById('submitNameSearch').click();
        e.preventDefault();
    }
}

But if you really do just this in fKeyDown , solution 1 is enough.