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

Javascript – a simple redirect code with dropdown menu that does not return an error

the objective is to redirect the user according to the option chosen in the drop-down menu. ex. if user chose apple redirect user to apple.html page when he hit SUBMIT button.

I know it’s basic but don’t curse me my mother =]

all the best.

<body>
    <form  name="myform" id="myForm">
    <select>
        <option id="apple">Apple</option>
        <option id="orange">Orange</option>
        <option id="pineapple">Pineapple</option> 
        <option id="banana" selected>Banana</option>
      </select>
    <p>
    <input type="submit" name="submit" value="save">
    
    </p>
</form>

<script type="text/javascript">
    function OnSubmitForm(e){   
        
        e.preventDefault()
        console.log(e.target)
        if(document.getElementById("apple").selected ==true)
        {
        location.href ="apple.html";
        }
        else if(document.getElementById("pineapple").selected ==true)
        {
        location.href ="pineapple.html";
        }
        else if(document.getElementById("orange").selected ==true)
        {
        location.href ="orange.html";
        }
        else if(document.getElementById("banana").selected ==true)
        {
        location.href ="banana.html";
        }      
    }

        
document.getElementById("myForm").addEventListener("submit", function(e) {
        
    e.preventDefault();
        
    if(document.getElementById("apple").selected ==true)
        {
        location.href ="apple.html";
        }
        else if(document.getElementById("pineapple").selected ==true)
        {
        location.href ="pineapple.html";
        }
        else if(document.getElementById("orange").selected ==true)
        {
        location.href ="orange.html";
        }
        else (document.getElementById("banana").selected ==true)
        {
        location.href ="banana.html";
        }
    
});
</script>
</body>

I already spent hours researching but my IQ is 60. Anyone who can help has my eternal gratitude.

Tags:

2

Answers


  1. 0

    This should work:

    <body>
  <form>
    <select id="fruit">
      <option value="apple">Apple</option>
      <option value="orange">Orange</option>
      <option value="pineapple">Pineapple</option>
      <option value="banana">Banana</option>
    </select>

    <button type="button" onclick="redirect()">Submit</button>
  </form>

  <script>
    function redirect() {
      const fruit = document.getElementById('fruit').value;

      if (fruit === 'apple') {
        window.location.href = 'apple.html'; 
      } else if (fruit === 'orange') {
        window.location.href = 'orange.html';
      } else if (fruit === 'pineapple') {
        window.location.href = 'pineapple.html';
      } else if (fruit === 'banana') {
        window.location.href = 'banana.html';
      }
    }
  </script>
</body>

    Explanation:

    • Use the value attribute on each <option> to store a unique value
    • Get the selected value with document.getElementById('fruit').value
    • Compare to the desired values and redirect with window.location.href
    • Call the redirect on button click instead of form submit to avoid page refresh
    Login or Signup to reply.
  2. 0

    The option elements should have a value attribute and the select element should have a name attribute.

    In the submit callback function e.target refer to the form and then you can get the select element by it’s name and the value will be the value of the selected option.

    document.forms.myform.addEventListener("submit", e =>  {
  e.preventDefault();
  location.href = `${e.target.fruit.value}.html`;
});
    <form name="myform">
  <select name="fruit">
    <option value="apple">Apple</option>
    <option value="orange">Orange</option>
    <option value="pineapple">Pineapple</option>
    <option value="banana" selected>Banana</option>
  </select>
  <p>
    <input type="submit" name="submit" value="save">
  </p>
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search