Submit Form using onChange for drop down list

Get Started
1

Hello everyone,

Could someone help me with this please?

Is there a way to use the JavaScript onChange event handler to submit a form when an option is selected from a drop down list?

ie.

<Form Name=“try” action=“/cgi-bin/script.pl”>
<input type=“hidden” name=“hiddenopt” value=“secret”>
<select name=“list” onChange=“this.form.submit”>
<option value=“1”>First option</option>
<option value=“2”>Second option</option>
<option value=“3”>Third option</option>
</select></form>

The onChange=“this.form.submit” reflects what I would like to happen when an user makes a selection.

Any ideas would be greatly appreciated, thanks in advance for your cooperation.

Be Well

2

onChange=“document.forms[‘try’].submit();”

-Kevin Yank.
http://www.SitePoint.com/
Helping Small Business Grow Online!

3

In the head of your document you could put:

<SCRIPT LANGUAGE=“Javascript”>

<!–

function navigate() {
var menuIndex = document.formMenu.selectMenu.selectedIndex;
location = document.formMenu.selectMenu.options[menuIndex].value;
}
//–>
</script>

and then in the form you could put:

<form name=“formMenu”>

     	    &lt;select name="selectMenu" onChange="navigate()"&gt;
                  &lt;option selected&gt;Select Topic&lt;/option&gt;
                  &lt;option value="page1.htm"&gt;Page 1&lt;/option&gt;
                  &lt;option value="page2.htm"&gt;page 2&lt;/option&gt;
                  &lt;option value="page3.htm"&gt;page 3 &lt;/option&gt;
                  
              &lt;/form&gt;

Unless I’ve made a typo, this will work. I use it on a site.

Take Care,

Adam

4

Thanks for your help Kevin I appreciate it, but it doesn’t work, IE says that the object does not accept this property or method.

I also tried onChange=“this.form.submit();” with the same results.

Any suggestions would be very appreciated.

Be Well

[This message has been edited by LeoF (edited July 06, 2000).]

[This message has been edited by LeoF (edited July 06, 2000).]

5

Thank you Adam, but that would be for viewing web pages, I’m trying to submit a form, your intention is very appreciated.

Be Well

6

Leo,

Can you provide the complete code you’re trying that’s giving you that error? The following works perfectly here:

<BLOCKQUOTE><font size=“1” face=“Verdana, Arial”>code:</font><HR><pre>
<HTML>
<HEAD>
<TITLE> Submit onChange </TITLE>
</HEAD>
<BODY>
<Form Name=“try” action=“/cgi-bin/script.pl”>
<input type=“hidden” name=“hiddenopt” value=“secret”>
<select name=“list” onChange=“document.forms[‘try’].submit();”>
<option value=“1”>First option</option>
<option value=“2”>Second option</option>
<option value=“3”>Third option</option>
</select></form>
</BODY>
</HTML>



------------------
-Kevin Yank.
[http://www.SitePoint.com/](http://www.SitePoint.com)
Helping Small Business Grow Online!
7

Oops, I’d forgotten to take out the submit button.

Sorry about that Kevin, my apologies for wasting your time.

Thanks a lot for your help, now it works fine, I appreciate it

Be Well

8

Hi,

I hate to show my ignorance or throw a wrench into things, but…

How is anyone going to select option[0]?
onChange fires with a change in the selected option. I guess what I’m asking is: Is your first option a ‘dummy’? Because if it’s not, no one will be able to select it.

Vinny

9

Hi Vincent,

The example given is just generic code, the real implementation uses a dummy:

<OPTION VALUE=“javascript:void(0)”>Select Option</OPTION>

for the first option.

Thanks for pointing this out as I’m sure it would help to clarify things for someone browsing the archives.

Be Well

[This message has been edited by LeoF (edited July 07, 2000).]