Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    drop-down list value redirect to a url of choice

    Hi,

    I've checked the boards and was unable to find something that matched the code that I have. The code basically uses radio buttons to populate results to a drop-down list depending on the radio button they choose. I'm having trouble figuring out where and how to add the redirection url for each of the value choices in the drop down. I was told something about using window.location('http://url.here') and then to populate the location parameter with the array value.

    Does this mean I have to redo my script or can another piece of code be added on to make it work. How do I alter my existing code? Thanks in advance for any help I can get:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <script type="text/javascript">
    
    var services = new Array();
    services['Tutoring'] = ['Grady', 'Holy Innocents', 'North Springs', 'Paideia', 'Riverwood', 'School Not Listed?'];
    services['Recording'] = ['John Doe'];
    
    
    function changechoice(choice)
    {
        var serviceList = services[choice];
    
        changeSelect('service', serviceList, serviceList);
        document.getElementById('service').disabled = false;
        document.getElementById('service').onchange();
    }
    
    function changeservice(serviceValue)
    {
        document.getElementById('output').innerHTML = serviceValue;
        return;
    }
    
    function changeSelect(fieldID, newValues, newOptions)
    {
      selectField = document.getElementById(fieldID);
      selectField.options.length = 0;
    
      if (newValues && newOptions)
      {
        for (i=0; i<newValues.length; i++)
        {
          selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
        }
    
      }
    }
    
    </script>
    </head>
    
    <body>
    
    <table width="400" align="center" colspan="2" border="0" rowspan="2">
    <tr>
    
    
    
    <td width="200" align="left">
    Pick an option:
    
    </td>
    </tr>
    
    <td width="200">
    <br>
    <ul>
    <input type="radio" name="choice" value="Tutoring" onclick="changechoice(this.value);"> Tutoring<br />
    <input type="radio" name="choice" value="Recording" onclick="changechoice(this.value);"> Recording<br />
    </ul>
    
    </td>
    
    <br>
    
    <td width="200" align="center" valign="top">
    <br>
    <select name="service" id="service" onchange="changeservice(this.value);" disabled="disabled">
    <option> -- Choose an Option -- </option>
    </select>
    
    </td>
    </table>
    </body>
    </html>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Example:-

    Code:
    <h1>Select Menu</h1>
    <select onchange="if(this.value!=''){document.location.href=this.value}">
    <option value="">Select location</option>
    <option value="http://www.codingforums.com">CodingForums</option>
    <option value="http://www.webdeveloper.com">Webdeveloper</option>
    <option value="http://www.javascriptkit.com">JavaScript</option>
    </select>
    </body>
    </html>

    He hides his academic bushel under a shrewd carapace. - BBC Radio 5 Live

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for replying, Phillip.

    I tried what you said, but everytime I clicked on the radio button it would just try to automatically visit a url without allowing me to select the option from the drop-down list first:


    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <script type="text/javascript">
    
    var services = new Array();
    services['Tutoring'] = ['Grady', 'Holy Innocents', 'North Springs', 'Paideia', 'Riverwood', 'School Not Listed?'];
    services['Recording'] = ['John Doe'];
    
    
    function changechoice(choice)
    {
        var serviceList = services[choice];
    
        changeSelect('service', serviceList, serviceList);
        document.getElementById('service').disabled = false;
        document.getElementById('service').onchange();
    }
    
    function changeservice(serviceValue)
    {
        document.getElementById('output').innerHTML = serviceValue;
        return;
    }
    
    function changeSelect(fieldID, newValues, newOptions)
    {
      selectField = document.getElementById(fieldID);
      selectField.options.length = 0;
    
      if (newValues && newOptions)
      {
        for (i=0; i<newValues.length; i++)
        {
          selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
        }
    
      }
    }
    
    </script>
    </head>
    
    <body>
    
    <table width="400" align="center" colspan="2" border="0" rowspan="2">
    <tr>
    
    
    
    <td width="200" align="left">
    Pick an option:
    
    </td>
    </tr>
    
    <td width="200">
    <br>
    <ul>
    <input type="radio" name="choice" value="Tutoring" onclick="changechoice(this.value);"> Tutoring<br />
    <input type="radio" name="choice" value="Recording" onclick="changechoice(this.value);"> Recording<br />
    </ul>
    
    </td>
    
    <br>
    
    <td width="200" align="center" valign="top">
    <br>
    <select name="service" id="service" onchange="if(this.value!=''){document.location.href=this.value}"; disabled="disabled">
    <option value=""> -- Choose an Option -- </option>
    <option value="http://www.codingforums.com">CodingForums</option>
    <option value="http://www.webdeveloper.com">Webdeveloper</option>
    <option value="http://www.javascriptkit.com">JavaScript</option>
    
    </select>
    
    </td>
    </table>
    </body>
    </html>


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •