PDA

View Full Version : concatenating string OnClick event


fairwinds
09-30-2002, 08:52 AM
A newbie question. I am trying to use an OnClick event in a menu to direct to a url that is composed of two strings. The first string is obtained from an option menu, the second part from a radio button. Problem is to concatenate them so that the onclick is done for the complete url.

Here's what I have:

<form name="menu">
<p>
<select name="component" size="1">
<option selected value="http://url1">modules</option>
<option value="http://url2">variables</option>
</select>
<input type="radio" name="menuaction" value="_new" checked>
New
<input type="radio" name="menuaction" value="_view">
View
<input type="button" value="Go" onClick="location=document.menu.component.options[document.menu.component.selectedIndex].value" + "location=document.menu.menuaction.value">
</p>
</form>

the idea is to be able to select from the option list and pick one of new or view and then click go button to go to the url that is made of the two strings.

Can someone tell me what I am doing wrong?

:confused:

ez4ne12c
09-30-2002, 09:32 AM
Hi
if you dont need the go button you can put the onClick in the radio button, thats alot simpler... but ...
Using the go button..
I dont think you have determined which radio button is checked so cant distinguish. This part doesnt make sense to me

onClick="location=document.menu.component.options[document.menu.component.selectedIndex].value" + "location=document.menu.menuaction.value">

you need to do some kind of function call

onClick="javascript:go_there();"

<script>
function go_there()
{
var loc=document.menu.component.options[document.menu.component.selectedIndex].value
for (i=0; i<idocument.menu.menuaction.length; i++)
{ if (document.menu.menuaction[i].checked==true) {loc=loc+document.menu.menuaction[i].value;}
}
}
</script>

well i havent checked the syntax but thats a way to do it
ez

adios
09-30-2002, 04:57 PM
You're only setting one location property - not necessary to do it twice.

<select name="component" size="1">
<option selected value="http://url1">modules</option>
<option value="http://url2">variables</option>
</select>
<input type="radio" name="menuaction" value="_new" checked="checked"
onclick="hidden_action.value=this.value">
New
<input type="radio" name="menuaction" value="_view"
onclick="hidden_action.value=this.value">
<input type="hidden" name="hidden_action" value="">
View
<input type="button" value="Go"
onclick="window.location=component[component.selectedIndex].value + hidden_action.value">

Notice the abbreviated referencing. When scripting within a form (where the event handlers like onclick & onchange reside) you can refer to element names as if they were local variables (they are). Use window.location to avoid having it resolve to document.location; this will redirect in most all browsers, but its still the wrong property. Using a hidden field avoids using a function, necessary to check the separate fields.

fairwinds
09-30-2002, 05:20 PM
Thank you so much for the replies. Adios, this is exactly what I was trying to do but did not have the knowledge to execute. Your reply really helped me understand what I was doing incorrectly and to improve my JavaScripting. Thanks for your informative reply.

Regards,

fairwinds