0

複数の入力タイプを持つ検索フォームがあり、ユーザーが入力を変更するたびに検索フォームから値を取得したいと考えています。

フォームは次のようになります。

<form id="search">
<input type="hidden" name="cat[0][name]" value="cat1">
//select type input.
<select id="cat-0" name="cat[0][id]" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>    
<input type="hidden" name="cat[1][name]" value="cat2">
<select id="cat-1" name="cat[1][id]" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

//checkbox type input
<input type="hidden" name="cat[2][name]" value="cat3">
<label><input id="cat-2" type="checkbox" name="cat[2][id][]" value="1"> 1</label>
<label><input id="cat-2" type="checkbox" name="cat[2][id][]" value="2"> 2</label>
<label><input id="cat-2" type="checkbox" name="cat[2][id][]" value="3"> 3</label>


//radio type input
<input type="hidden" name="cat[3][name]" value="cat4">
<label><input id="cat-3" type="radio"  name="cat[3][id]" value="1"> 1</label>
<label><input id="cat-3" type="radio"  name="cat[3][id]" value="2"> 2</label>
<label><input id="cat-3" type="radio"  name="cat[3][id]" value="3"> 3</label>
</form>

ご覧のとおり、入力値は多次元配列になっています。ユーザーが入力のいずれかを変更したときに、JavaScript でこれらの値を取得するにはどうすればよいですか。私がやりたかったのは、このサイトのような検索エンジンを作成することだけでした。

フォームは動的に生成されるため、すべてのフィールドに固定の ID/クラスを定義することはできません。

jsスクリプトは次のようになりますか？

$('[id^=cat]').live('change', function(e) {
            passing_data();
            return false;
        });

        function passing_data() {
            var getdata = $(':input[name="cat"]').val();//this i can't get it.
            alert(getdata);
            return false;
        }

passing_data() は取得できなかった部分です。検索機能を実行するために ajax で使用されます。

何か案が？

4

2 に答える 2

1

"this" を関数に渡してみてください:

    $('[id^=cat]').live('change', function(e) {
        passing_data($(this)); // pass object as a jQuery object
        return false;
    });

    function passing_data($obj) {
        var getdata = $obj.val();
        alert(getdata);
        return false;
    }
于 2013-05-17T18:58:34.867 に答える
0

Legendin Making と JohnMarkT によって与えられた答えは、どちらも私の問題を解決できます。あなたの答えに本当に感謝します。とても助かります。

私にとっての最終的な解決策は、次のようにこれら 2 つの回答を組み合わせることです。

$('[id^=cat]').live('change', function(e) {
        passing_data($(this)); // pass object as a jQuery object
        return false;
    });

    function passing_data($obj) {
        var getdata = $obj.closest("form").serialize();// i have multiple form,so it should choose the responding form.
        alert(getdata);
        return false;
    }
于 2013-05-18T17:17:13.607 に答える