Javascript javascript获取文本框的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10938729/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript getting the value of a text box
提问by user979331
I have this text box here...
我这里有这个文本框...
<input name="search" type="text" maxlength="512" id="search" class="searchField" autocomplete="off" title="" />
and I also have this submit
我也有这个提交
<input type="submit" name="btnSearch" value="Search" onclick="location.href='http://www.website.com/search/';" id="btnSearch" class="buttonSearch" />
what I am trying to do is add whatever is in the text box in my
我想要做的是在我的文本框中添加任何内容
onclick="location.href='http://www.website.com/search/';"
so it would look like this..
所以它看起来像这样..
onclick="location.href='http://www.website.com/search/what ever the user searches';"
how would I go about doing this, I have been googling my little heart out.
我该怎么做呢，我一直在谷歌上搜索我的小心脏。
回答by Tomasz Nurkiewicz
Please avoid mixing JavaScript and HTML. You can remove onclickattribute and replace it with this in plain JavaScript somewhere after the DOM has loaded:
请避免混合使用 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;
}
Also remember about escaping the search box, e.g. using encodeURIComponent(). Here is a working jsfiddle example.
还要记住转义搜索框，例如使用encodeURIComponent(). 这是一个有效的 jsfiddle 示例。
回答by nebulousGirl
This should work:
这应该有效：
onclick="location.href='http://www.website.com/search/'+document.getElementById('search').value;"
But I wouldn't ever write that in one of my project as writing script directly on tags is a bad practice.
但是我永远不会在我的一个项目中编写它，因为直接在标签上编写脚本是一种不好的做法。
回答by John Kalberer
Here is a working jsfiddle
I moved the event handler out of the button as it is more maintainable. Also I encode the search query so that it gets to the server properly.
我将事件处理程序移出了按钮，因为它更易于维护。我还对搜索查询进行编码，以便它正确地到达服务器。
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 ;
});
回答by Joseph Marikle
You can add it to the onclick event like so
您可以像这样将其添加到 onclick 事件中
document.getEelementById("btnSearch").onclick = function(){
location.href='http://www.website.com/search/' + document.getEelementById("search").value;
}
edit: aaaaand too slow... oh well. At least this is not inline.
编辑：aaaaand 太慢了......哦。至少这不是内联的。
回答by Pablo Mescher
You would be better off using the < script> tag for this task. Example:
对于此任务，最好使用 <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>
However, you should try to 'clean' a little the text from the textbox so when you append it to the url you get a valid url. You should trim the text, then search for special characters and escape them, etc.
但是，您应该尝试从文本框中“清理”一些文本，以便将其附加到 url 时，您将获得一个有效的 url。您应该修剪文本，然后搜索特殊字符并对其进行转义等。
