Question

我有一个下拉选择选项，我希望能够选择一个并单击提交按钮并引导我到另一个页面（NewYork.html，Toronto.html，NewJersey.html）

<form action="action_page.php">
    <select>
        <option value = "0">Select your Destination..</option>
        <option value="1">New York</option>
        <option value="2">Toronto</option>
        <option value="3">New Jersey</option>
    </select>
    <input type="submit" value="Submit" class="myButton">
</form>

Answer 1

在您的actionPage中，您必须将用户重定向到另一页。

但你也必须检查安全性，而不是重定向到你不知道的事情因此，您可以使用带有$array = [1 => "newYork", 2 => "toronto"...]等表单值的关联数组，然后继续进行重定向，而不会忘记退出：

$redirect = $array[$_POST['value']] + ".html";
header("Location: /$redirect");
exit();

Answer 2

您可以使用header()在PHP代码中执行此操作，并使用提交表单中的值。

header('Location: /'.$submittedValue.'.html');

显然，您需要首先检查表单输入，因为您此刻只会从下拉列表中获取数值，但您可以将其与要在标题函数中使用的字符串相匹配。

请注意，head功能必须高于页面的任何echo，print_r()或任何其他将输出到浏览器的功能

Answer 3

您可以将value个option元素设置为URL个.html个用户将被重定向的文档;使用event.preventDefault()阻止form在submit事件中提交;如果select .value不是"0"，请将location.href设置为select .value

HTML

<form>
    <select>
        <option value="0">Select your Destination..</option>
        <option value="NewYork.html">New York</option>
        <option value="Toronto.html">Toronto</option>
        <option value="NewJersey.html">New Jersey</option>
    </select>
    <input type="submit" value="Submit" class="myButton">
</form>

的javascript

document.querySelector("form")
.addEventListener("submit", function(e) {
  e.preventDefault(); // prevent default action
  var select = this.querySelector("select");
  if (select.value !== "0") {
    location.href = select.value;
  }
})

如何使用链接到下拉列表的提交按钮？

3 个答案: