Form using drop-downs as links to other pages?

Bobcat110 · 03-26-2007, 10:22 AM

Hey everyone, thanks in advance for your help!

The website I'm working on was previously coded by someone else. The form they used worked until a few weeks ago, but now it's not responding. (Very frustrating...)

The form itself is a series of 3 drop-down menus that are supposed to send the user to a specific page depending on the choices they select. For example, if they choose "2000", "Fall" and "Food," it should send them to a .PDF file with the URL "...docs/newsletters/2000_fall_food.pdf". Here's the code:

Javascript in header:

Code:

function view_newsletter() 
	{     
         var get_year = document.forms[0].year.options[document.forms[0].year.selectedIndex].value
         var get_quarter = document.forms[0].quarter.options[document.forms[0].quarter.selectedIndex].value
         var get_dept = document.forms[0].dept.options[document.forms[0].dept.selectedIndex].value
         if ((get_year == "") && (get_quarter == "") && (get_dept == ""))
         {
           alert("Please select a year and a quarter a newsletter")
         }
         else if (get_year == "")
         {
           alert("Please select a year")
         }
         else if (get_quarter == "")
         {
           alert("Please select a quarter")
         }
         else if (get_dept == "")
         {
           alert("Please select a quarter")
         }
         else 
         {
                go_url = "../docs/newsletters/" + get_year + "_" + get_quarter + "_" + get_dept + ".pdf"
                window.location = go_url
     }

Form in body:

Code:

<form action="view_newsletter" method="post" name="Newsletter" id="Newsletter">
					  <div align="center">
					    <select name="year">
					      <option selected>Select Year</option>
					      <option>----------------</option>
					      <option value="2007">2007</option>
					      <option value="2006">2006</option>
					      <option value="2005">2005</option>
					      <option value="2004">2004</option>
					      <option value="2003">2003</option>
					      <option value="2002">2002</option>
					      <option value="2001">2001</option>
					      <option value="2000">2000</option>
					      <option value="1999">1999</option>
					      <option value="1998">1998</option>
					      <option value="1997">1997</option>
				        </select>
				        <select name="quarter">
					      <option selected>Select Quarter</option>
					      <option>-----------------------</option>
					      <option value="fall">Fall</option>
					      <option value="winter">Winter</option>
					      <option value="spring">Spring</option>
					      <option value="summer">Summer</option>
			            </select>
				        <select name="dept">
					      <option selected>Select Newsletter</option>
					      <option>-----------------------</option>
					      <option value="scope">A Broder Scope</option>
					      <option value="food">Food</option>
					      <option value="lab">Lab</option>
					      <option value="osha">OSHA</option>
					      <option value="rad">Rad</option>
			            </select>				
				        <input type="button" name="Submit" value="View" onClick="view_newsletter()">
			          </div>
                    </form>

I'm completely stumped, so any help is greatly appreciated! Thank you so much.

StupidScript · 03-26-2007, 11:46 AM

It doesn't look too tricky, so let's look at details:

Code:

function view_newsletter(frm) //<= added form reference, see 'action' 
	{     
         var get_year = frm.year.options[frm.year.selectedIndex].value
         var get_quarter = frm.quarter.options[frm.quarter.selectedIndex].value
         var get_dept = frm.dept.options[frm.dept.selectedIndex].value
         if ((get_year == "") && (get_quarter == "") && (get_dept == ""))
         {
           alert("Please select a year and a quarter a newsletter")
         }
         else if (get_year == "")
         {
           alert("Please select a year")
         }
         else if (get_quarter == "")
         {
           alert("Please select a quarter")
         }
         else if (get_dept == "")
         {
           alert("Please select a quarter")
         }
         else 
         {
                go_url = "../docs/newsletters/" + get_year + "_" + get_quarter + "_" + get_dept + ".pdf"
                window.location = go_url
          } //<= missing 'else' closing brace
     }

Code:

<form action="javascript:view_newsletter(this)" ...

If you are using Firefox or a Navigator, you can troubleshoot your Javascript by opening the "Javascript Console" ... type javascript: into the address bar and press Enter to launch the console.

Personally, I would not use a traditional form action as you have done for a Javascript form like this. Instead of a <input type=submit...> I would use <input type=button onclick=view_newsletter(this.form)...>. This prevents any type of client-server interaction aside from that provided by the script, and often makes it easier to handle the form's behavior.

Bobcat110 · 03-28-2007, 09:22 AM

Thank you so much for your help!

The methods you suggested make the page work fine, but only on Firefox. Now, for some reason, the page will not load AT ALL on Internet Explorer. Any ideas? Here's the code again:

Code:

function view_newsletter(frm)
	{     
         var get_year = frm.year.options[frm.year.selectedIndex].value
         var get_quarter = frm.quarter.options[frm.quarter.selectedIndex].value
         var get_dept = frm.dept.options[frm.dept.selectedIndex].value
         if ((get_year == "") && (get_quarter == "") && (get_dept == ""))
         {
           alert("Please select a year and a quarter a newsletter")
         }
         else if (get_year == "")
         {
           alert("Please select a year")
         }
         else if (get_quarter == "")
         {
           alert("Please select a quarter")
         }
         else if (get_dept == "")
         {
           alert("Please select a quarter")
         }
         else 
         {
                go_url = "../docs/newsletters/" + get_year + "_" + get_quarter + "_" + get_dept + ".pdf"
                window.location = go_url
          } 
     }

And...

Code:

<form action="javascript:view_newsletter()" method="post" name="Newsletter" id="Newsletter">
					  <div align="center">
					    <select name="year">
					      <option selected>Select Year</option>
					      <option>----------------</option>
					      <option value="2007">2007</option>
					      <option value="2006">2006</option>
					      <option value="2005">2005</option>
					      <option value="2004">2004</option>
					      <option value="2003">2003</option>
					      <option value="2002">2002</option>
					      <option value="2001">2001</option>
					      <option value="2000">2000</option>
					      <option value="1999">1999</option>
					      <option value="1998">1998</option>
					      <option value="1997">1997</option>
				        </select>
				        <select name="quarter">
					      <option selected>Select Quarter</option>
					      <option>-----------------------</option>
					      <option value="fall">Fall</option>
					      <option value="winter">Winter</option>
					      <option value="spring">Spring</option>
					      <option value="summer">Summer</option>
			            </select>
				        <select name="dept">
					      <option selected>Select Newsletter</option>
					      <option>-----------------------</option>
					      <option value="scope">A Broder Scope</option>
					      <option value="food">Food</option>
					      <option value="lab">Lab</option>
					      <option value="osha">OSHA</option>
					      <option value="rad">Rad</option>
			            </select>				
				        <input type="button" onclick="view_newsletter(this.form)" name="Submit" value="View">
			          </div>
                    </form>

Again, thanks for your help. I really appreciate it!

Bobcat110 · 03-28-2007, 10:37 AM

Nevermind! I figured it out.

Thanks again for the help!