[英]HTML: How to create search bar?
I have this search bar: 我有这个搜索栏:
<div id="tfheader">
<form id="tfnewsearch" method="get" action="http://mywebsite.com">
<input type="text" class="tftextinput" name="q" size="21" maxlength="120"><input type="submit" value="search" class="tfbutton">
</form>
<div class="tfclear"></div>
</div>
It worked great but when I search "keyword", it will redirect to http://mywebsite.com/?q=keyword . 效果很好,但是当我搜索“关键字”时,它将重定向到http://mywebsite.com/?q=keyword 。
How to redirect to http://mywebsite.com/keyword ? 如何重定向到http://mywebsite.com/keyword ? Thank you very much !
非常感谢你 !
You can do it with javascript 您可以使用javascript
<script>
var a = document.getElementById('tfnewsearch');
a.addEventListener('submit',function(e) {
e.preventDefault();
var b = document.getElementById('tftextinput').value;
window.location.href = 'http://mywebsite.com/'+b;
});
</script>
and give your input field an ID called tftextinput. 并给您的输入字段一个名为tftextinput的ID。
<input type="text" class="tftextinput" id="tftextinput" name="q" size="21" maxlength="120">
I don't really understand why you would like to do this, as it is way more difficult to handle this request server side as it would be to simply handle the $_GET data you will receive when doing a standard form transmission. 我不太明白为什么要这么做,因为处理请求服务器端比较困难,因为要处理标准表单传输时将收到的$ _GET数据。
EDIT: 编辑:
Here is the full code: 这是完整的代码:
<div id="tfheader">
<form id="tfnewsearch" method="get" action="http://www.mywebsite.com">
<input type="text" class="tftextinput" id="tftextinput" name="q" size="21" maxlength="120"><input type="submit" value="search" class="tfbutton">
</form>
<div class="tfclear"></div>
</div>
<script>
var a = document.getElementById('tfnewsearch');
a.addEventListener('submit',function(e) {
e.preventDefault();
var b = document.getElementById('tftextinput').value;
window.location.href = 'http://mywebsite.com/'+b;
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.