如何將HTML表單的值轉換為“自定義” URL？

Question

在我的網站上，我可以訪問“ mysite.com/search/search_term”來訪問搜索功能，其中“ search_term”是用戶輸入的術語。 我正在嘗試獲取一種簡單的單輸入形式以這種方式設置URL格式。 我可以做到的一種方法是制作一個PHP腳本，該腳本將重定向到正確的位置。 因此，如果您導航到“ search_redirect.php？term = search_term”，它只會將您重定向到“ / search / search_term”。 我想避免這樣做，因為這似乎是多余的。 如果找不到更好的答案，那可能就是我最終要做的。 現在，這是我到目前為止嘗試過的：

我試圖在這樣的表單上設置onsubmit ：

<form onsubmit="search_navigate()" id="navbar_form">
    <input type="search" placeholder="Search Articles..." id="navbar_search"></input>
    <input id="navbar_submit" type="submit" value=">"/>
</form>

... onsubmit調用此函數：

function search_navigate(){
    alert("well hey there");
    window.location = ("http://www.google.com");
}

當我單擊“提交”按鈕時，我可以看到警報，但是沒有像您期望的那樣將我帶到Google，而是帶我到了我所在的同一頁面（無論該頁面是什么）。

這是我以這種方式實現它時面臨的問題。 如果您完全有另一種方法，我仍然想聽聽。

Answer 1

function search_navigate() {
    var obj = document.getElementById("navbar_search");
    var keyword = obj.value;
    var dst = "http://yoursite.com/search/" + keyword;
    window.location = dst;
}

可以為您工作嗎？

---

此外，要停止表單提交執行其原始功能，請在函數調用后附加“ return false”，即onsubmit =“ foo（）; return false”。

Answer 2

通常，當您遇到這種奇怪的行為時，它與<form> 。 嘗試這個：

<script type="text/javascript">
function search_navigate() {
    var obj = document.getElementById("navbar_search");
    var keyword = obj.value;
    var dst = "http://yoursite.com/search/" + keyword;
    window.location = dst;
}
</script>

<span id="navbar_form">
    <input type="search" placeholder="Search Articles..." id="navbar_search" />
    <input type="button" id="navbar_submit" value="Submit" onClick="search_navigate()" />
</span>