jQueryまたはjavascriptを使用して検索フォームオプションを維持するためのURLパラメータを取得します。

Question

URL文字列を設定する一連の検索フィルタがあります（後で処理するため）。ページをリロードして結果を表示すると、ユーザーが選択したオプションが失われます。 jQueryを使用してURLからパラメータを取得し、どのオプションが選択されたかを覚えているのかどうか疑問に思っていましたか？

たとえば、私のURLに www.something.com/index.htmlが含まれていたとしますか？ &色=赤&円= 1 &スター= 0は、私のフォームは、次のようにロードします：

<h3>Colour</h3> 
<p>Blue: <input name="colour" type="radio" value="blue" /></p> 
<p>Red: <input name="colour" type="radio" value="red" /></p> [selected] 
<p>Green: <input name="colour" type="radio" value="green" /></p> 

<h3>Shape</h3> 
<p>Circle: <input name="circle" type="checkbox" value="1" /></p> [selected] 
<p>Square: <input name="square" type="checkbox" value="1" /></p> 
<p>Star: <input name="star" type="checkbox" value="1" /></p> 

感謝を探して。

Answer 1

<script type="text/javascript"> 
function getQueryStr(name) { 
    hu = window.location.search.substring(1); 
    gy = hu.split("&"); 
    for (i=0;i<gy.length;i++) { 
     ft = gy[i].split("="); 
     if (ft[0] == ji) { 
      return ft[1]; 
}}} 

$(document).ready(function() { 
    $('input[name=color]').val(getQueryStr("colour")); 
    $('input[name=circle]').prop("checked", (getQueryStr("circle")=="1")); 
    $('input[name=square]').prop("checked", (getQueryStr("square")=="1")); 
    $('input[name=star]').prop("checked", (getQueryStr("star")=="1")); 
}); 
</script> 

Answer 2

あなたがこの情報は、あなたが展開する必要がありますする場所オブジェクトLocation in javascript上に保持され、あなたのアドレスバー

Answer 3

のクエリ文字列のparamsを与える以下のJSオブジェクト

location.search 

を使用することができますパラメータ。

Answer 4

あなたはこの機能を使用して、URLパラメータを得ることができます（ここではAppend urlVariable to next page's linkを見て）：あなたはパラメータを持っている場合

function getParameterByName(name) 

    { 
     name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]"); 
     var regexS = "[\\?&]"+name+"=([^&#]*)"; 
     var regex = new RegExp(regexS); 
     var results = regex.exec(window.location.href); 
     if(results == null) 
     return ""; 
     else 
     return decodeURIComponent(results[1].replace(/\+/g, " ")); 
    } 

var colour= getParameterByName('colour'); 
var circle= getParameterByName('circle'); 
var star= getParameterByName('star'); 

が、それはそれらを選択するのは簡単です：

$('input[name=colour][value='+colour+']').attr('checked', 'checked'); 

Answer 5

がない限りクライアント側でこれを行う必要がある特別な理由は次のとおりです。

これは通常iですサーバー側ので行われました。サーバー側でパラメータをチェックすることができます（これはおそらく実行します）。あらかじめ選択されたチェックボックスを使ってHTMLマークアップをクライアントに送り返します。

プラスの面では、これはjavascriptが無効になっているブラウザや検索エンジンでも機能します。