JavaScript获取文本框的值

Question

我这儿有一个文本框...

<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';"

我该如何做到这一点，我已经疯狂地谷歌搜索了很久。

- user979331

Answer 1

请避免混合JavaScript和HTML。您可以删除onclick属性，并在DOM加载后的某个地方使用纯JavaScript替换它：

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示例。

- Tomasz Nurkiewicz

---

嗯...我谷歌了一下escape和encodeURIComponent的区别。今天学到了新知识，谢谢。 - John Kalberer

Answer 2

这个应该能够工作：

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

但我从不会在我的项目中直接将脚本写入标签中，因为这是一种不好的实践。

- nebulousGirl

---

那你为什么要把这个作为答案发布呢？依我看，尽可能地阻止不良做法是最好的。 - Pablo Mescher

可能是一些还在学习 JavaScript 的人。应该遵循最佳实践，但并非强制要求。 - nebulousGirl

Answer 3

这里是一个工作的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 ;
});

- John Kalberer

Answer 4

您可以将它添加到 onclick 事件中，就像这样。

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

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

- Joseph Marikle

Answer 5

你最好使用

- Pablo Mescher