改變從一種形式的URL哈希提交

Question

在我的index.html我有以下形式：

<form action="/search" id="search-form"> 
    <input type="text" id="search-input" name="s" x-webkit-speech> 
</form> 

哪個正確地重定向到/search?s=searchvalue，但我怎麼能使用javascript改變，要/search#s=searchvalue？

Answer 1

那麼不使用jQuery，但應該工作：

<form action="/search" id="search-form" 
     onsubmit="location.href=this.action+'#s='+this.s.value; return false;"> 
    <input type="text" id="search-input" name="s" x-webkit-speech> 
</form> 

參見本小提琴手：http://jsfiddle.net/SujwN/

Answer 2

我建議：

$('#search-form').submit(
    function(e){ 
     e.preventDefault(); 
     var input = $('#search-input'); 
     window.location.hash = input.attr('name') + '=' + encodeURIComponent(input.val()); 
    }); 

以上，再加上on('hashchange', /* other stuff... */)監聽器似乎工作：

$(window).on('hashchange', function(e){ 
    var hash = window.location.hash.substring(1), 
     attrValue = hash.split('='), 
     varName = attrValue[0], 
     varValue = attrValue[1]; 
    console.log(varName, decodeURIComponent(varValue)); 
}); 

JS Fiddle demo。

參考文獻：

• attr()。
• decodeURIComponent()。
• encodeURIComponent()。
• event.preventDefault()。
• submit()。
• val()。
• window.location.hash。

Answer 3

<form action="/search" id="search-form" onsubmit="document.location = '/search#s=' + $('#search-input').val(); return false;"> 
    <input type="text" id="search-input" name="s" x-webkit-speech> 
</form>