Question

I want to prevent a form from being submitted using jQuery and instead run a function when the user wants to submit.

Here’s my forms markup:

<form action="" method="post" id="msg-form">
    <p><textarea name="msg"></textarea><input type="submit" value="Send"></p>
</form>

And my Javascript code:

$('#msg-form').submit(function() {
    return false;
}

However, when I press the submit button, the form still gets sent and the page refreshes. How can I properly prevent the form from submitting?

Answer 1

It seems the event handler is not even executed, thus I assume the form could not have been found. Try enclosing your code within handler executed when the DOM is ready. In jQuery it can be simply done like that:

$(function(){
    $('#msg-form').submit(function(event) {
        event.preventDefault();
        // code executed when user tries to submit the form
    });
});

Also, as you can see above, you can prevent default behaviour of the form when it is being submitted.