RE: JavaScript submit on select from dropdown

This solved my problem. The only oddity is that the processing template
receives the form contents as an appendage to the URL, but I think the CF
server is doing that; I can deal with it. Unlike "normal" forms where the
intent is to send data, I needed to go to a new page. One of my managers had
asked for a Web form where choosing an item from one menu would determine
what options were available on the next menu. The simple solution was to
change to a slightly different page. My apologies if not explaining my
overall intent caused any confusion. As always, this HWG list is extremely
helpful.

Keith Purtell, Web Designer


> -----Original Message-----
> From: Eric V. Myer [mailto:evmyer(at)matrixpc.com]
> Sent: Monday, May 15, 2000 9:33 PM
> To: Keith Purtell; hwg-languages(at)hwg.org
> Subject: RE: JavaScript submit on select from dropdown
>
>
> Keith,
>
> You need to either name your form and use 'document.formname'
> or if it is
> the only form on your page, use the ordinal reference
> 'document.forms[0]' to
> reference it. Examples:
>
> With named form use:
>
> <SCRIPT LANGUAGE="JavaScript">
> <!--
> function SendTo_Template(object) {
>      document.myform.action =
> object.options[object.selectedIndex].value;
>      document.myform.submit();
> }
> // -->
> </script>
>
> <form name="myform">
> <SELECT size="1" NAME="ProductNumber"
>  onChange="SendTo_Template(this)">
>  <OPTION value=""> </OPTION>
>  <OPTION value="page1.cfm">Target Page One</OPTION>
>  <OPTION value="page2.cfm">Target Page Two</OPTION>
>  </SELECT>
> </form>
>
>
> Or to reference by ordinal (non-named) , use
>
> <SCRIPT LANGUAGE="JavaScript">
> <!--
> function SendTo_Template(object) {
>      document.forms[0].action =
> object.options[object.selectedIndex].value;
>      document.forms[0].submit();
> }
> // -->
> </script>
>
> <form>
> <SELECT size="1" NAME="ProductNumber"
>  onChange="SendTo_Template(this)">
>  <OPTION value=""> </OPTION>
>  <OPTION value="page1.cfm">Target Page One</OPTION>
>  <OPTION value="page2.cfm">Target Page Two</OPTION>
>  </SELECT>
> </form>
>
> The ordinal method is a bit more dangerous since it requires
> you to ensure
> that the number refers to the correct form. If you have more
> than one form
> on your page, the 0 would need to be changed unless this form
> was the first
> (as reading from the top of the html document). I would
> recommend the named
> version to avoid any problems of this nature. As with all
> JavaScript, the
> form name is case sensitive so make sure you type them the
> same in the name
> property of the form and in the reference in the function. If
> not you will
> get the error about it being undefined.
>
> Also, you can remove the '.form.ProductNumber' from your
> onChange event. The
> 'this' keyword makes the complete reference to the control for you.
>

HWG: hwg-languages mailing list archives, maintained by Webmasters @ IWA