Suppose I have a list box with different items, each with unique values, and an 'Enter' button below it. I want to be able to get the value of the selected item at the time of click, and then when have the button property:
ONCLICK="window.location.href='http://somewebsite.com/somefile.php?id="thisvalue"'"
So for example, something like----
<SELECT NAME = ParticipantList STYLE = "WIDTH: 187" SIZE = 18>
<OPTION VALUE='hi'> hello </OPTION>
<SELECT>
<INPUT TYPE="submit" VALUE="Info" ONCLICK="window.location.href='http://helloworld.com/this.php?="hi"'"/>
Can anyone help me figure this out? Much appreciated.
HTML forms are designed to do exactly this when their method is GET:
<form action="http://helloworld.com/this.php" method="get">
<select name="ParticipantList">
<option value="hi">Hello</option>
</select>
<input type="submit">
</form>
This will send the user to http://helloworld.com/this.php?ParticipantList=hi
. No JavaScript required.
The Javascript
<script type="text/javascript">
function doAction(){
var selected = document.getElementById('ParticipantList').value;
if (selected == 'hello'){
window.location.href = 'http://somewebsite.com/somefile.php?id=1';
} else if (selected == 'bye'){
window.location.href = 'http://somewebsite.com/somefile.php?id=2';
} else {
alert('unknown option selected');
}
}
</script>
The HTML
<select name="ParticipantList" id="ParticipantList">
<option value="hello">hello</option>
<option value="bye">bye</option>
</select>
<input type="button" name="action" id="action" value="Submit" onclick="doAction()" />