Form onsubmit being completely ignored

Question

I am trying to make a dynamic comment insert system using AJAX, but I have a problem with the form: it won't even try and perform the javascript function. Instead, it just performs a GET operation and redirects me to ?user=&reply=&submit=Submit and doesn't do anything. Here is my form code:

<form id="cmtsubmit" onsubmit="return submitComment(this);">
    <input type="text" name="user" id="user" />
    <textarea name="reply" id="reply"></textarea> 
    <input type="submit" name="submit" value="Submit" />
</form>

and here is my javascript code:

function submitComment(form) {
    if (window.XMLhttpRequest) {
        httpRequest = new XMLhttpRequest();
    } else if (window.ActiveXObject) {
        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }

    httpRequest.onreadystatechange = function() {
            if(httpRequest.readyState === 4 && httpRequest.status === 200) {
                document.getElementById('container').innerHTML += '<div style="border: 1px solid; padding: 15px;">' + httpRequest.responseText + '</div>';
                return false;
            } else {

            }
    }

        httpRequest.open('GET', 'index.php?p=cmtinsrt&user=' + form.user.value + '&cmt=' + form.reply.value, true);
        httpRequest.send(null);

}

Where am I going wrong?

EDIT: I added a "return false" to the code and now it works in IE10, but not Firefox or Chrome. I haven't tested any other browsers yet but clearly if it doesn't work in those two it's not a proper solution.

Answer 1

An inline javascript event must return false to prevent the default action from occurring. For example, if you have an anchor tag:

<a onclick="somefunction();" href="http://www.google.com">Go</a>

someFunction would be called, but the browser would also go to Google. You've got the first part of the equation, to prevent the default action, your inline event should be a return of the function:

<form onsubmit="return someFunction(this);">

...but someFunction has to actually return something to be effective. Return true and the browser will continue with the default action. Return false, and it stops.

var someFunction =function (formElement) {
    // .. code
    return false; // prevents the form submit
}

If you attach the event from javascript:

var ele = document.getElementById('myElement');
ele.addEventListener('click', someFunction);

...then you can also use the preventDefault method of the event object to stop the default action:

var someFunction =function (e) {
    e.preventDefault();
    // .. code
    return false; // redundant if you preventDefault
}

Obviously, this does not apply to your use case with inline events. This has the added benefit of stopping the default action even if there is an error in your handler function. If there is an error and you're using inline events, the return false statement is never reached, so the default action continues when your function bombs.

Documentation

• Events and Handlers on MDN - https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Overview_of_Events_and_Handlers
• Event object - https://developer.mozilla.org/en-US/docs/Web/API/Event
• Event.preventDefault - https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault