How to prevent the form submit for non-submit buttons?

Question

html:

<form id="form" action="/" method='post'>
<button>Button</button>
<input type="text">
<input type="submit" id="send-form" value="Send">
</form>

js:

$('#form').submit(function() {
    console.log('send');
    return false;
});

Why when I press the Button, the form is submitted (I need this element for another action)? How to prevent this?

Answer 1

The default action for <button> is to be a submit button, but you can have it just be a "normal button" by doing the following:

<button type="button">Button</button>

See the HTML specs for more info.

Answer 2

Try to add an onclick listener:

<button onclick="return false;">Button</button>

That should prevent that the button to submit the form. The click action is, with that trick, canceled.

Answer 3

It's failing for browsers that do not have console object - IE for example.

Just wrap it with try..catch and it will work for all browsers:

$('#form').submit(function() {
    try {
        console.log('send');
    }
    catch (e) {
    }

    return false;
});​

Live test case.

Edit: better yet, you can write your own function to show the message even for browsers without console:

function Log(msg) {
    if (typeof console != "undefined" && console.log) {
        console.log(msg);
    } else {
        var myConsole = $("MyConsole");
        if (myConsole.length == 0) {
            myConsole = $("<div></div>").attr("id", "MyConsole");
            $("body").append(myConsole);
        }
        myConsole.append(msg + "<br />");
    }
}

$('#form').submit(function() {
    Log('send');

    return false;
});

This will append the message to the document itself when console is not available. Updated fiddle.

Answer 4

<form id="form" action="/" method='post'>
<input type="button" value="Button">
<input type="text">
<input type="submit" id="send-form" value="Send">
</form>​

This will create "not-submitting" button. Example: http://jsfiddle.net/R3UrK/1/