Select option with onClick

[LOW]

I have two forms on the same page. They're both drop down lists using onClick to proceed to the selected page. However, no matter what option I select, I always go to the same page. I'm sure I'm overlooking something very obvious.

=========================================================

<script language="JavaScript" type="text/javascript">
<!--hide from old browsers

function choose(){
var option = document.forms[0].Site.options[document.forms[0].Site.selectedIndex].value;
location=option;
}

// end script hiding-->
</script>

<form><strong><label for="weddingbp">Balboa Park</label></strong><br>
<select name="Site" id="weddingbp">
<option value="../parks/balboa/admincourtyard.shtml">Administration Courtyard Lawn</option>
<option value="../parks/balboa/alcazargarden.shtml">Alcazar Garden</option>
<option value="../parks/balboa/balboaparkclub.shtml">Balboa Park Club (Ballroom &amp; Santa Fe Room)</option>
<option value="../parks/balboa/casadelpradopatioa.shtml">Casa del Prado Patio A</option>
<option value="../parks/balboa/casadelpradopatiob.shtml">Casa del Prado Patio B</option>
<option value="../parks/balboa/marstonhouse.shtml">Marston House &amp; Garden</option>
<option value="../parks/balboa/recitalhall.shtml">Recital Hall</option>
<option value="../parks/balboa/redwoodcircle.shtml">Redwood Circle</option>
</select>
<a href="" OnClick="choose(); return false;"><input type="image" src="../graphics/go.gif" border=0 alt="Go Button" ></a>
</form>

<form><strong><label for="weddingpp">Presidio Park</label></strong><br>
<select name="Site" id="weddingpp">
<option value="../parks/presidio/inspiration.shtml">Inspiration Point</option>
<option value="../parks/presidio/padrecross.shtml">Padre Cross</option>
<option value="../parks/presidio/palm.shtml">Palm Canyon</option>
<option value="../parks/presidio/arbor.shtml">The Arbor</option>
</select>
<a href="" OnClick="choose(); return false;"><input type="image" src="../graphics/go.gif" border=0 alt="Go Button" ></a>
</form>

 

[LFI]

Instead of calling choose(), call choose(0) and choose(1) for the respective forms. In the JavaScript, update choose() to this:

function choose([red]x[/red]){
var option = document.forms[[red]x[/red]].Site.options[document.forms[[red]x[/red]].Site.selectedIndex].value;
location=option;
}

The way you currently have it, it is hard-coded to always refer to forms[0], which is the first form on the page.

'hope that helps!

--Dave

 

[LOW]

Thank you. I made the changes and am now getting the following error:

Microsoft JScript runtime error: 'document.forms[...].Site.options' is null or not an object

 

[LFI]

Hmm... not sure why that would be... Can you copy and paste your code again, exactly the way it reads now?

--Dave

 

[cLFlaVA]

Dave-

Is it possible he used a hard-return?

function choose(x){
    var s = document.forms[x].Site;
    var o = s.options[s.selectedIndex].value;
    var l = o;
}

P.S. - LOW - I strongly advise against using reserved JS words like "option" and "location".

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

 

[LFI]

cL,

Ah, if he just cut-and-paste my example, then a hard return in the paste-job might have confounded his efforts. You could be right. Good catch!

--Dave