根据select选项元素将表单重定向到不同的URL，但在我提交表单后

Question

I'm new to JavaScript, and seeking for some help. I have a form with a select drop down with 5 options.

<form accept-charset="UTF-8" action="" method="post" onclick="javascript:location.href = this.value;">

<input id="name" name="name" size="30" type="text" value="Type your name">

<select id="option" name="Region" >
   <option value="value1.html">Option1</option>
   <option value="value2.html">Option2</option>
   <option value="value3.html">Option3</option>
   <option value="value3.html">Option4</option>
   <option value="value3.html">Option5</option>
</select>

<input type="submit" id="submit" value="Submit">

</form>

And this Javascript:

<script type="text/javascript">
    window.onload = function(){
        location.href=document.getElementById("option").value;
    }       
</script>

I tried this and doesn't work to redirect to the page I want after I submit the form! Any ideas? I need that form to work, doesn't matter if I can do it with PHP or JavaScript.

Answer 1

Your window.onload is executed instantly before you even get a chance to make a choice.

<form onsubmit="return mysubmit();">
<select id="option" name="Region" >
   <option value="value1.html">Option1</option>
   <option value="value2.html">Option2</option>
   <option value="value3.html">Option3</option>
   <option value="value3.html">Option4</option>
   <option value="value3.html">Option5</option>
</select>

<input type="submit" id="submit" value="Submit">

</form>

<script>
function mysubmit(){
  //you can return false; here to prevent the form being submitted
  //useful if you want to validate the form

  window.location.href=document.getElementById('option').value;
}
</script>