2

Possible Duplicate:
Javascript add delete row sends form instead of adding row

I have a page with two forms.

One form simply has one hidden input element, used to help concatenate a query string.

In the other form, I have a simple button element (not input type submit button) and the idea is to submit the other form onclick (using JavaScript). The button is in this form.

As it stands (for testing purposes), all I am doing at the moment is calling a JavaScript function called changeSpec(), wherein the absolutely only line of code is an alert box that shows me the value of the hidden input element.

The button:

<td class="entry" colspan="3"><button onclick="changeSpec()">Change Species</button></td>

The form with the hidden input element:

<form id="specChange" action="" method="get"><input id="hiddenSpec" type="hidden" value='@oppSpec' /></form>

The JavaScript function:

function changeSpec() 
{
    alert($("#hiddenSpec").val());
}

When I click the normal button element, I get a server-side error (YSOD)... I mean, WOW, didn't see that coming, lol.

The error I get is unrelated to this, as it is some casting error in a query string I still have to sort out (this YSOD occurs, at the moment, any time the big form [not the one shown above] is submitted). Also this YSOD is a runtime error, not a compiler error, because the page loads no problem, until it thinks it is submitted, and the IsPost branch is subsequently executed.

Anyway, I can tell that somehow (even when I set onclick=""), that this button, which does reside in the big form, is actually trying to submit the form?

Not only have I used regular button elements in other forms before, and have always thought a regular button could never submit a form, I have also cleared the cache, several times, just to make sure nothing goofy (on that level) is going on. Anyway, it seems I am in need of an education pertaining to just how a normal button element can be interpreted by an html form.

Please help, I am truly at a loss here. How is this possible?

Thanks, and let me know if more code is needed.

Community
  • 1
  • 1
VoidKing
  • 6,282
  • 9
  • 49
  • 81
  • Can you add the complete code. It is hard to answer your question with the information provided. – Ikaso Dec 14 '12 at 16:13
  • possible duplicate of [Javascript add delete row sends form instead of adding row](http://stackoverflow.com/questions/13881113/javascript-add-delete-row-sends-form-instead-of-adding-row), [HTML button to NOT submit form](http://stackoverflow.com/questions/2825856/html-button-to-not-submit-form), etc – jbabey Dec 14 '12 at 16:14

2 Answers2

6

From the W3C button wiki page:

The missing value default [for type] is the Submit Button state.

In other words, any button without a type attribute is a submit button and will submit the form by default. Change your code to <button type="button" onclick="...">

Julien Lebosquain
  • 40,639
  • 8
  • 105
  • 117
  • Aha, okay! Thank God, now I understand. This was giving my brain a runtime error... I wish I could accept both of your answers (this and the one above), but as yours gives me a more concise and simple explanation, this is the answer I will accept. – VoidKing Dec 14 '12 at 16:21
  • 1
    As a sidenote, this question ( http://stackoverflow.com/q/13497606/1169519 ) maybe interesting when using IE10. – Teemu Dec 14 '12 at 16:22
  • @Julien Lebosquain Oh yeah, how so? – VoidKing Dec 14 '12 at 16:22
2

Taking a look at : http://www.w3schools.com/tags/tag_button.asp

Tips and Notes

Note: If you use the element in an HTML form, different browsers may submit different values. Use to create buttons in an HTML form.

If you want a button that does not submit the form, use <input type=button /> : HTML button to NOT submit form

Cheers.

Community
  • 1
  • 1
vtortola
  • 34,709
  • 29
  • 161
  • 263