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.