Steve Nyholm

Javascript - capturing onsubmit when calling form.submit()

I was recently asked: "Why doesn't the form.onsubmit event get fired when I submit my form using javascript?" 

The answer: Current browsers do not adhere to this part of the html specification.  The event only fires when it is activated by a user - and does not fire when activated by code.

The W3C Document Object Model (DOM) Level 2 HTML Specification says that submit() "submits the form. It performs the same action as a submit button."

However, this browser non-compliance is documented in the DOM Level 2 HTML Issues List.  The Resolution: "Unfortunately, given the differences between implementations, it was not possible to find a common ground on this issue. No changes were in the specification. You cannot rely on having an event when invoking the submit() method."

The Mozilla Client-Side JavaScript Reference says that onsubmit "Executes JavaScript code when a submit event occurs; that is, when a user submits a form."  Notice that it says user action... this excludes javascript code.  (This appears to be the same as the Netscape/Sun reference.)
 
The Microsoft reference is more explicit, "The submit method does not invoke the onsubmit event handler."

More references:

Many people have written on this topic, including codestore and alexking. 

ASCII Lookup Table (by the way, ASCII stands for American Standard Code for Information Interchange)

Discussion of capturing the ASCII key code value pressed in Firefox and Internet Explorer 6

Here is a quick code example that demonstrates one workaround for this problem:

<form id="searchForm" name="searchForm" method="get" onsubmit="return validateMyForm()">
<!--
Associate the onsubmit event handler with a javascript validation function.
This function will return a boolean value. This return value determines whether the form is submitted or not.
-->

<label>Search: </label><input name="textboxSearch" id="textboxSearch" maxlength="128" type="text" />

<select name="selectFilter" id="selectFilter" onkeypress="return handleKeystroke(event)">
<option selected value="First">First</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
<option value="Fourth">Fourth</option>
<option value="Fifth">Fifth</option>
</select>
<!--
Associate the onkeypress event with a javascript function, passing in the event object.
This function will attempt to submit the form if the Enter key is pressed.
-->

<input class="submitButton" type="submit" value="Go" title="Go" />

</form>

<SCRIPT language="JavaScript">

//This function handles the onkeypress event.
//If the Enter key is pressed, it attempts to submit the form.
function handleKeystroke(e)
{
    var keyPressed;

    //Browser compatibility check
    if (document.all) 
    {
        //Browser used: Internet Explorer 6
        keyPressed = e.keyCode;
        alert('handleKeystroke: IE property: keyCode');
    } 
    else 
    {
        //Browser used: Firefox
        keyPressed = e.which;
        alert('handleKeystroke: FF property: which');
    }
    alert('handleKeystroke: key=' + keyPressed);

    //13 = ASCII code for Enter key
    if (keyPressed == 13) 
    { 
        alert('handleKeystroke: pressed Enter');
        //Directly calling document.searchForm.submit() will not fire the form's onsubmit event handler.
        //Call a javascript helper funtion that simulates that event.
        submitMyForm();
    } 
    else 
    {
        alert('handleKeystroke: pressed another key');
    }
}

//This function performs validation and any other pre-form-submit tasks.
//The form will only be submitted if this function returns true.
function validateMyForm()
{
    var isValid = confirm('Do you want to submit the form?');
    alert('validateMyForm: isValid = ' + isValid);
    return isValid;
}

//This function simulates the onsubmit event handler.
//This function should be called by javascript code instead of document.MyFormName.submit().
function submitMyForm()
{
    //first, call the same validation function used in the form.onsubmit event handler
    var thisresult = validateMyForm();
    alert('submitMyForm: validateMyForm returned: ' + thisresult);

    //if the function returned true, submit the form
    if (thisresult) 
    {
        alert('submitMyForm: javascript will submit form');
        document.searchForm.submit();
    }
}

</SCRIPT>