5

我这里有这个文本框...

<input name="search" type="text" maxlength="512" id="search" class="searchField" autocomplete="off" title="" />

我也有这个提交

<input type="submit" name="btnSearch" value="Search" onclick="location.href='http://www.website.com/search/';" id="btnSearch" class="buttonSearch" />

我想做的是在我的文本框中添加任何内容

onclick="location.href='http://www.website.com/search/';"

所以它看起来像这样..

onclick="location.href='http://www.website.com/search/what ever the user searches';"

我该怎么做呢，我一直在用谷歌搜索我的小心脏。

4

5 回答 5

11

请避免混合使用 JavaScript 和 HTML。您可以在 DOM 加载后的某处删除onclick属性并将其替换为纯 JavaScript 中的 this：

document.getElementById('btnSearch').onclick = function() {
    var search = document.getElementById('search').value;
    var searchEncoded = encodeURIComponent(search);
    window.location.url = "http://www.website.com/search/" + searchEncoded;
}

还要记住转义搜索框，例如使用encodeURIComponent(). 这是一个有效的 jsfiddle 示例。

于 2012-06-07T19:47:41.463 回答
10

这应该有效：

onclick="location.href='http://www.website.com/search/'+document.getElementById('search').value;"

但是我永远不会在我的一个项目中写这个，因为直接在标签上编写脚本是一种不好的做法。

于 2012-06-07T19:44:41.697 回答
1

这是一个工作的jsfiddle

我将事件处理程序移出按钮，因为它更易于维护。我还对搜索查询进行了编码，以便它正确地到达服务器。

var search = document.getElementById('search');
var submit = document.getElementById('btnSearch');

submit.addEventListener('click', function(e) {
    var searchValue = encodeURIComponent(search.value);  // encode the search query
    window.location.href = 'http://www.website.com/search/' + searchValue ;
});
于 2012-06-07T19:46:33.400 回答
0

您可以像这样将其添加到 onclick 事件中

document.getEelementById("btnSearch").onclick = function(){
    location.href='http://www.website.com/search/' + document.getEelementById("search").value;
}

编辑：aaaand 太慢了......哦，好吧。至少这不是内联的。

于 2012-06-07T19:45:46.460 回答
0

你最好使用 <script> 标签来完成这个任务。例子：

<input name="search" type="text" maxlength="512" id="search" class="searchField" autocomplete="off" title="" />
...
<input type="submit" name="btnSearch" value="Search"  id="btnSearch" class="buttonSearch" />
<script type="text/javascript">
var button= document.getElementById('btnSearch');
button.onclick= function(){
    var text= document.getElementById('search').value;
    location.href='http://www.website.com/search/'+text;
}
</script>

但是，您应该尝试从文本框中“清理”一些文本，以便在将其附加到 url 时获得有效的 url。您应该修剪文本，然后搜索特殊字符并将它们转义，等等。

于 2012-06-07T19:49:21.760 回答