<Button Type="Submit"> Compatibility

button type=submit compatibility?

Oldish post but I think there is a solution that has been missed here. The button[type=submit] has always had problems with inconsistent behaviour, particularly with old IEs, and from @Mark's tests looks like we still have problems.

Instead you can use two different values for the name attribute of the input[type=submit] and parse these server-side to get the correct action. For example, you can do:

<form method="get" action="">
    <input type="text" name="txt"/>
    <input type="submit" name="action[do_something]" value="Do Something Cool"/>
    <input type="submit" name="action[do_another]" value="Do Something Dangerous"/>
</form>

Only the successful (clicked or default) name-value pair gets submitted so, say, in PHP you can easily do something like:

<?php
if (isset($_GET['action']['do_something'])) {
    // do something
} else {
    // do another thing
}
?>

Note the default action will always be the first that appears in the source.

Difference between input type='submit' / and button type='submit'text/button

Not sure where you get your legends from but:

Submit button with `<button>`

As with:

<button type="submit">(html content)</button>

IE6 will submit all text for this button between the tags, other browsers will only submit the value. Using <button> gives you more layout freedom over the design of the button. In all its intents and purposes, it seemed excellent at first, but various browser quirks make it hard to use at times.

In your example, IE6 will send text to the server, while most other browsers will send nothing. To make it cross-browser compatible, use <button type="submit" value="text">text</button>. Better yet: don't use the value, because if you add HTML it becomes rather tricky what is received on server side. Instead, if you must send an extra value, use a hidden field.

Button with `<input>`

As with:

<input type="button" />

By default, this does next to nothing. It will not even submit your form. You can only place text on the button and give it a size and a border by means of CSS. Its original (and current) intent was to execute a script without the need to submit the form to the server.

Normal submit button with `<input>`

As with:

<input type="submit" />

Like the former, but actually submits the surrounding form.

Image submit button with `<input>`

As with:

<input type="image" />

Like the former (submit), it will also submit a form, but you can use any image. This used to be the preferred way to use images as buttons when a form needed submitting. For more control, <button> is now used. This can also be used for server side image maps but that's a rarity these days. When you use the usemap-attribute and (with or without that attribute), the browser will send the mouse-pointer X/Y coordinates to the server (more precisely, the mouse-pointer location inside the button of the moment you click it). If you just ignore these extras, it is nothing more than a submit button disguised as an image.

There are some subtle differences between browsers, but all will submit the value-attribute, except for the <button> tag as explained above.

button vs. input type=button /. Which to use?

Here's a page describing the differences (basically you can put html into a <button></button>)
And another page describing why people avoid <button></button> (Hint: IE6)

Another IE problem when using <button />:

And while we're talking about IE, it's
got a couple of bugs related to the
width of buttons. It'll mysteriously
add extra padding when you're trying
to add styles, meaning you have to add
a tiny hack to get things under
control.

Asp button with different button type

You can just set UseSubmitBehavior="false" and it will render type="button" instead of type="submit" (.net 4 at least)

Using Input Type Submit Or Button

Yes, it's possible!

In fact, the <button>'s default behavior is to act as a submit button, so:

<button>Go</button>

Will do what you expect it to! Buttons are also slightly easier to style, and you can keep them consistent with other types of buttons without adding extra rules or selectors in your CSS.

It's worth noting that IE 7 and 6 have some pretty horrible bugs when using <button value="whatever">Something Else</button>. If you want lower IE compatibility and to use the value= attribute, don't use <button>

How can I get the button that caused the submit from the form submit event?

I implemented this and I suppose it will do.

$(document).ready(function() {
    $("form").submit(function() { 

    var val = $("input[type=submit][clicked=true]").val()

    // DO WORK

});

and this is the submit button event that sets it up

$("form input[type=submit]").click(function() {
    $("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
    $(this).attr("clicked", "true");
});

Thanks for the responses, but this isn't terribly inelegant...

How to create a HTML Cancel button that redirects to a URL

cancel is not a valid value for a type attribute, so the button is probably defaulting to submit and continuing to submit the form. You probably mean type="button".

(The javascript: should be removed though, while it doesn't do any harm, it is an entirely useless label)

You don't have any button-like functionality though, so would be better off with:

<a href="http://stackoverflow.com"> Cancel </a>

… possibly with some CSS to make it look like a button.

How do I make a div button submit the form its sitting in?

onClick="javascript:this.form.submit();">

this in div onclick don't have attribute form, you may try this.parentNode.submit() or document.forms[0].submit() will do

Also, onClick, should be onclick, some browsers don't work with onClick

<Button Type="Submit"> Compatibility