0

私は自分のサイトhttp://www.example.comに非常に単純なフォームを持っています

<form>
    <input type="text" value="" name="name">
</form>

フォームを次のようにするにはどうすればよいですか

<form>
    <input type="text" value="tom" name="name">
</form>

入力した場合 (またはユーザーが検索ページからこのページに移動した場合) http://www.example.com?name=tom

ある時点で私のフォームがこのようになるかもしれないことを念頭に置いてください。

<form>
    <input type="text" value="" name="name[]">
    <input type="text" value="" name="name[]">
    <input type="text" value="" name="name[]">
    <input type="text" value="" name="name[]">
</form>

そのため、名前の配列も処理したいと思います。jQuery.param()を見てきましたが、これを行う方法がわかりません。php などのサーバー側言語に送信しなくても可能ですか?

4

1 に答える 1

1

クエリ文字列から javascript 変数への名前と値のペアを取得する組み込みの jQuery の方法はありません (ただし、あるべきではありませんか??)

しかし、人々はそれを行うために純粋な JavaScript 関数を作成しました: How can I get query string values in JavaScript? .

上記の質問に対する 2 番目の回答 ( Andy Eによる) を使用すると、すべてのクエリ文字列変数を JavaScript オブジェクトの名前と値のペアにキャプチャできます。彼が書いたものは次のとおりです。

var urlParams = {};
(function () {
    var match,
        pl     = /\+/g,  // Regex for replacing addition symbol with a space
        search = /([^&=]+)=?([^&]*)/g,
        decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
        query  = window.location.search.substring(1);

    while (match = search.exec(query))
       urlParams[decode(match[1])] = decode(match[2]);
})();

次に、これらを使用して、次のように jQuery でクエリ文字列名と同じ名前の入力のフォーム値を設定します。

$.each(urlParams, function(key, value){
    $('form [name=' + key + ']').val(value);
});

更新:これは jsFiddle でテストするのが難しいため、実際の例として Web ページ全体を示します。値「a」、「b」、および「c」を、URL によって渡された値 (「1」、「2」、および「3」) に置き換えます。これを localhost で test.html として設定するだけです。次の場所に移動します。http://localhost/test.html?a=1&b=2&c=3

<!DOCTYPE html>
<html><head><title>Test URL params</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" >
    $(function(){
            var urlParams = {};
            (function () {
                var match,
                pl     = /\+/g,  // Regex for replacing addition symbol with a space
                search = /([^&=]+)=?([^&]*)/g,
                decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
                query  = window.location.search.substring(1);

                while (match = search.exec(query))
                   urlParams[decode(match[1])] = decode(match[2]);
            })();

            $.each(urlParams, function(key, value){
                $('form [name=' + key + ']').val(value);
            });
    });
</script>

</head>
<body>

<form>
    <input name="a" value ="a" /><input name="b" value ="a" /><input name="c" value ="a" />
</form>

</body></html>
于 2012-08-05T12:53:34.867 に答える