如何根据用户在下拉菜单中选择的内容提交表单并将用户重定向到其他页面

问题描述:

我正在开发一个html页面,用户在其中提交一个包含下拉框以从中选择值的表单。一旦用户提交表单,我想提交表单并根据用户在下拉框中选择的内容将用户重定向到不同的页面。如何根据用户在下拉菜单中选择的内容提交表单并将用户重定向到其他页面

HTML表单代码

<form action="#" method="post" class="form-group" id="dtls"> 
      <label for="sp">Choose one:</label><select name="sp" id="sponsor" class="form-control"> 
      <option value="mark" id="s1">Mark</option> 
      <option value="markus" id="s2">Markus</option> 
      </select> 
      <label for="mail">Your Email:</label><input type="email" name="mail" class="form-control" placeholder="Email Address..."> 
      <input type="submit" name="sub" class="btn form-control btn-success" id="but"> 
     </form> 

任何人都可以建议我解决这个难题的好办法? 感谢

+0

在PHP(因为你已经标记的是),做任何你需要的表单值,然后执行一些逻辑(基本'if'或'之开关),并将其重定向到相关页面。 – Archer

当然,这样的事情在你的JS:

redirectPage() { 
    // Gets value of dropdown 
    var selectedOption = $("#sponsor option:selected").val(); 

    // Picks correct url to go to 
    var url; 
    switch(selectedOption) { 
    case "mark": 
     url = "your link #1 here"; 
     break; 
    case "markus": 
     url = "your link #2 here"; 
     break; 
    default: 
     url = ""; 
     break; 
    } 

    // Changes current page and keeps back history 
    window.location.assign(url); 
} 

一个简单的方法来摆脱大switch语句是只是有每个选项的值是URL,如果你不使用其他任何下拉值。您可以随时用.text()代替.val()以从下拉菜单中获得“Mark”和“Markus”。

参考文献:

Get the value of a dropdown in jQuery

How to redirect to another webpage in JavaScript/jQuery?

if(isset($_POST["sub"])) { 
    $value = $_POST["sp"]; 
    header("location: /$value"); 
} 

如果与价值陈述或者你可以直接设置标头就像我重定向用户你可以这样做做过或回声JavaScript的window.location

jQuery的

$("#dtls").submit(function() { 
    var value = $("#sponsor").val(); 
    if(value == "mark") { 
     window.location.href = "/mark"; 
    } elseif(value == "markus") { 
     window.location.href = "/markus"; 
    } 
});