Use Value of Selected Item in List to Redirect Browser Accordingly [HTML]

Go To


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:


So for example, something like----

<SELECT NAME = ParticipantList STYLE = "WIDTH: 187" SIZE = 18>
    <OPTION VALUE='hi'> hello </OPTION>
<INPUT TYPE="submit" VALUE="Info" ONCLICK="window.location.href='"hi"'"/> 

Can anyone help me figure this out? Much appreciated.

2012-04-04 01:20
by Ruben Martinez Jr.
Why do you have HTML/PHP in your title?, seems like you need this solution using javascript/html - Zubair1 2012-04-04 01:36
Would jQuery be ok - Zubair1 2012-04-04 01:36
jQuery would be fine. Sorry, I left PHP in the title because I had originally structured this question (I use PHP mixed in my ListBox) as it pertained to my particular scenario, rather than this more general form. I'll remove it - Ruben Martinez Jr. 2012-04-04 01:54
i posted my answer below, let me know if it works for you - Zubair1 2012-04-04 02:10


HTML forms are designed to do exactly this when their method is GET:

<form action="" method="get">
  <select name="ParticipantList">
    <option value="hi">Hello</option>

  <input type="submit">

This will send the user to No JavaScript required.

2012-04-04 01:59
by Brandan
I ended up taking this course of action, with a slight modification. Because I have multiple submit buttons that take different actions, I defined the form action in Javascript within the button attributes, i.e. ONCLICK="javascript: FORM2.action='' - Ruben Martinez Jr. 2012-04-04 02:35


The Javascript

<script type="text/javascript">
function doAction(){
    var selected = document.getElementById('ParticipantList').value;
    if (selected == 'hello'){
        window.location.href = '';
    } else if (selected == 'bye'){
        window.location.href = '';
    } else {
        alert('unknown option selected');


<select name="ParticipantList" id="ParticipantList">
    <option value="hello">hello</option>
    <option value="bye">bye</option>

<input type="button" name="action" id="action" value="Submit" onclick="doAction()" />
2012-04-04 02:09
by Zubair1