如何将 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"。