javascript - 根据选择选项元素将表单重定向到不同的 URL，但在提交表单之后

Question

我是 JavaScript 新手，正在寻求帮助。我有一个带有 5 个选项的选择下拉列表的表单。

<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>

还有这个 JavaScript:

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

我尝试过此操作，但在提交表单后无法重定向到我想要的页面!有任何想法吗？我需要该表单才能工作，无论我是否可以使用 PHP 或 JavaScript 来完成它。

Answer 1

在您有机会做出选择之前，您的 window.onload 就会立即执行。

<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>