如何使用鏈接到下拉列表的提交按鈕？

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

您可以將option元素的value設置為.html文檔的URL ，用戶將被.html到該URL 。 使用event.preventDefault()防止在submit事件時submit form ； 如果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;
  }
})