Question 54208 in Javascript Question posted in
A very good W3school tutorial can be found here.

Redirect page to different URL using select dropdown and submit button – Javascript

I want to create a form that redirect the user to a different URL when they select an option from the select dropdown and click the submit button. Here is the markup for my form below:

<form>
  <select>
    <option selected="">- Select -</option>
    <option value="https://google.com">One</option>
    <option value="https://gmail.com">Two</option>
    <option value="https://yahoo.com">Three</option>
  </select>
  <input type="submit" value="Submit">
</form>
Tags:

4

Answers


  1. 0 
      <select id="select_location">
    <option selected="">- Select -</option>
    <option value="https://google.com">One</option>
    <option value="https://gmail.com">Two</option>
    <option value="https://yahoo.com">Three</option>
  </select>
  <input type="button" value="Submit" onclick="window.location=document.getElementById('select_location').value;">
    Login or Signup to reply.
  2. 0

    You can do:

    <form action="yourLink">

    but if you use onclick as @Oriol Vilaseca suggested, you may need to prevent the submit event:
    event.PreventDefault

    Login or Signup to reply.
  3. 0 
    <select>
    <option selected="">- Select -</option>
    <option value="https://google.com">One</option>
    <option value="https://gmail.com">Two</option>
    <option value="https://yahoo.com">Three</option>
</select>
<button onclick="window.location=document.querySelector('select').value;">Submit</button>
    Login or Signup to reply.
  4. 0

    This solution will work but not in the SO snippet:

    SCRIPT PART :

      <script>
    let selectList=null;
    let listButton=null;
    
    window.addEventListener("DOMContentLoaded", getElements);
    
    function getElements(e){
        selectList = document.getElementById("select_location");
        listButton = document.getElementById("submitButton");
        listButton.addEventListener("click", clickHandler);
    }
    
    function clickHandler(e){
        if(selectList.value!="select"){
            var win = window.open(selectList.value,"_top");
        }else{
            alert("Chose between the three options!");
        }
    }
  </script>

    HTML PART :

    
      <select id="select_location">
        <option selected="" disabled value="select">- Select -</option>
        <option value="https://google.com">One</option>
        <option value="https://gmail.com">Two</option>
        <option value="https://yahoo.com">Three</option>
      </select>

    <input type="button" value="Submit" id="submitButton">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search