Wierd onChange="submit();" problem...

[Neil Hillman]

Okay, I'm having problems with a really easy onChange="submit();" that I know I have used loads of times before, and I'm pulling my hair out as to why it doesn't work! Please help...

I have this really simple form:

<FORM ACTION="/index.php" METHOD="POST">
<SELECT NAME="func" onChange="this.form.submit();">
<OPTION VALUE="option1">option1</OPTION>
<OPTION VALUE="option2">option2</OPTION>
<OPTION VALUE="option3">option3</OPTION>
</SELECT>
</FORM>

But everytime I select an option, instead of submitting the form I just get a javascript error. Netscape tells me that this.form.submit is not a function and IE says that the object doesn't support this method or property

Am I missing something really obvious or what?
Thanks,

[fredmv]

I'd suggest using array notation to access that form and running the submit method on it.

Try something like this for your onchange event handler:


document.forms[0].submit();


That should work fine providing this form is the first one in the document. If not, you could always reference another form usiong array notiation, or even name it and then do it like this:


document.formName.submit();


Well, hope that works out for you.

Good luck!

[Neil Hillman]

Okay, even wierder still, when I take that chunk of code in isolation, as above, and stick it in it's own HTML document it works fine, so it is only screwing up in the context of my page.

That means something else within my document is conflicting with the chunk of code!? Any ideas where to start looking?

[fredmv]

Wow that is pretty weird. Do you have any other forms in the page you're trying to use this in?

Try changing your code to this, it should work because the form will now have a unique name and should not conflict with any other forms in the document.


<FORM ACTION="/index.php" METHOD="POST" name = "formx">
<SELECT NAME="func" onChange="document.formx.submit();">
<OPTION VALUE="option1">option1</OPTION>
<OPTION VALUE="option2">option2</OPTION>
<OPTION VALUE="option3">option3</OPTION>
</SELECT>
</FORM>


Well, that should work!

Good luck.

[Neil Hillman]

Nope, no other forms, and I tried it using your method, and still got the same errors.

I'm now having to start with the bare code and rebuild the rest of the page around it line at a time, so I can see where it screws up...

[fredmv]

Alright, hope everything works out.

[Neil Hillman]

Okay, figured it out, (just incase anyone else stumbles across this whilst having the same problem):

My version of the form in the context of my page also had a submit button whose name was... *cough* submit *cough*.

That meant that using either the this.form.submit() or the document.formx.submit() method, I was refering to the submit button and not the action.

Thanks for your time!

[ggallen]

Also beware, you can't use "function" as a varible name...

Took me awhile to figure out why this one wouldn't work.

had something like:

function subbmit(function) {
var document.FORM.COMMAND.value = function;
return;
}

but you CAN use funktion :D

I use subbmit in place of submit for variable/function
naming.

George

[fredmv]

Yeah, you can't use any reserved JavaScript keyword as a variable/function name. This should be helpful:

http://www.perlscriptsjavascripts.com/tutorials/javascript/keywords.html#07217983

[guvenck]

Neil,

I met the same problem and solved it with your recommendation.

Besides, you can always put the submit button between the <noscript></noscript> tag, in case the visitor's browser does not support JS or it is turned off.


<noscript>
<input type="submit" name="somethingotherthansubmit" value="Go!">
</noscript>