Can I make a <button> not submit a form?

Question

I've got a form, with 2 buttons

<a href="index.html"><button>Cancel changes</button></a>

<button type="submit">Submit</button>

I use jQuery UI's button on them too, simply like this

$('button').button();

However, the first button also submits the form. I would of thought that if it didn't have the type="submit", it wouldn't.

Obviously I could do this

$('button[type!=submit]').click(function(event) { event.stopPropagation(); });

But is there a way I can stop that back button from submitting the form without JavaScript intervention?

To be honest, I used a button only so I could style it with jQuery UI. I tried calling button() on the link and it didn't work as expected (looked quite ugly!).

Answer 1

Just use good old HTML:

<input type="button" value="Submit" />

Wrap it as the subject of a link, if you so desire:

<a href="http://somewhere.com"&gt;&lt;input type="button" value="Submit" /></a>

Or if you decide you want javascript to provide some other functionality:

<input type="button" value="Cancel" onclick="javascript: someFunctionThatCouldIncludeRedirect();"/>

Answer 2

<input type="button" value="Submit" />
<input type="image" value="Submit" src="..." />

Answer 3

The default value for the type attribute of button elements is "submit".

<button type=button>Submit</button>

Answer 4

Avoid using <button> tag since it has different behaviours on different browsers. Use <input> instead. There are three different buttons in HTML.

Firstly, normal buttons

<input type="button" value="Click here to do something" />

Secondly, reset buttons which reset the form

<input type="reset" value="Click here to reset" />

And lastly submit buttons which submit the form

<input type="submit" value="Click here to submit" />

You can also make customized functions for each type, using javascript and input element events.

Answer 5

The BUTTON element has a default type of submit.

You can make it do nothing by setting a type of button:

<button type="button">Cancel changes</button>

Answer 6

Honestly, I like the answers above. Easy and no need to get into JS. But I noticed that you were asking about jQuery. So for the sake of completeness, in jQuery if you return false with the .click() handler, it will negate the default action of the widget.

See here for an example (and more goodies, too). Here's the documentation, too.

in a nutshell, with your sample code, do this:

<script type="text/javascript">
    $('button[type!=submit]').click(function(){
        // code to cancel changes
        return false;
    });
</script>

<a href="index.html"><button>Cancel changes</button></a>
<button type="submit">Submit</button>

As an added benefit, with this, you can get rid of the anchor tag and just use the button.

Answer 7

<input type="submit" disabled="disabled" />
<input type="button" disabled="disabled" />