Question

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.

Answer 1

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="...">