Button doesn't work in Chrome

Question

I have

<button name="foo" value="bar" onclick="submit()" >foobar</button>

When I click the button in firefox, the value is transferred (is foo) and I can read the value like the following:

dim mode                : mode                = lcase(request("foo"))  

But the value is empty when I perform the same action in Chrome.

Could anyone help?

Answer 1

Different browsers have different default submit behaviors for buttons. If you want a button to submit the form (and thus post its name and value pair), you'll have to use:

<button type="submit" name="foo" value="bar" >foobar</button>

The type attribute for button can be submit , button , or reset and unless this is explicitly specified, will vary from browser to browser.

Answer 2

You have a quote missing. It should look like this:

<button name="foo" value="bar" onclick="submit()" >foobar</button>

In addition, submit() is a method on a form, so you must make sure your button is within <form></form> tags.

From the W3C specification :

Important : If you use the element in an HTML form, different browsers may submit different values. Internet Explorer, prior version 9, will submit the text between the <button> and </button> tags, while other browsers will submit the content of the value attribute. Use the <input> element to create buttons in an HTML form.

Answer 3

You need to quote your attributes:

<button name="foo" value="bar" onclick="submit()" >foobar</button>

Also "submit" is a reserved word in JavaScript. If you have a function called "submit" it may not work.

List of reserved words: http://www.javascripter.net/faq/reserved.htm

Answer 4

If you will it makes easier for google or other to find your form. Give the button an title and alt:

 <button name="foo" title="submit" alt="submit for contact" valeu="" onclick="submit()" >foobar</button>

Answer 5

From what I remember, old versions of IE (maybe even 8) treat only the good old <input type="submit" /> as "real" submit button that is part of the form thus sending its value. So <button> in such browsers won't send its value.

Change the HTML to this and it should work for all browsers:

<input type="submit" name="foo" value="foobar" onclick="this.value = 'bar';" />

As the value sent is the value seen, I had to use JavaScript trick to change the value upon click - as far as I know, can't do that without using client side script.