onchange form submission

[devinemke]

this code works (the form is submitted when the "number" dropdown is changed):

<form action="" method="POST">
<select name="number" onchange="this.form.submit()">
<option>1
<option>2
<option>3
</select>
</form>

why then does this not work?

<form action="" method="POST">
<select name="number" onchange="this.form.submit()">
<option>1
<option>2
<option>3
</select>
<input type="submit" name="submit" value="submit">
</form>

[jkd]

Remove name="submit" from the submit button and see what happens.

[devinemke]

it works but i need the name="submit" there because my form processing code is expecting $_POST['submit'] to be set. i even tried adding a hidden field named "submit" but it still breaks the js. any idea why i can't have any field named submit and still use the onchange code?

thank you for the help.

[jkd]

var myForm = a reference to the form - this.form if called from teh select, for example

myForm is now a reference to the containing form. Now, all elements can be accessed as myForm.elementName or myForm.elements.elementName (you can substitute square brackets for dot notation).

myForm.submit() is initially a function that submits the form. Then we are giving the browser an input named "submit", making it do this:

myForm.submit = reference to the submit button
myForm.elements.submit = reference to the same button

you overwrote the submit() method! Change the PHP to accept something else other than $_POST["submit"].

[devinemke]

thank you

[Willy Duitt]

Yes, he did overwrite the submit method, but can't you prototype the submit method?? Granted, a javascript solution is not ideal when the proper method is a serverside solution...

[jkd]

HTMLFormInput.prototype.submitForm = HTMLFormInput.prototype.submit;

Before everything else. Gecko/Opera 8 only (unless you include the libraries I've written on CF blog). But that's not an ideal solution.