1

jQuery を使用して検索フィルター メニューを作成しています。このフォームには、チェックボックスや入力ボックスなどのいくつかのフォーム要素が含まれています。ユーザーがフォームに何らかの変更を加えて#apply-filtersボタンをクリックすると、フォームは非表示になり、そのデータは を介し​​て処理するためにサーバー バックエンドに送信されます$.post()。

ユーザーがフォームに変更を加えた後、ボタンをクリックせずにフォームを閉じた場合#apply-filters、フィルター メニューdivは非表示になり、次にユーザーがフィルター メニューを再度開くと、ユーザーが行った最新の設定ではなく、初期設定が表示されます。しかし、クリックに失敗しました#apply-filters。

問題: jQuery でこれを行う最善の方法は何ですか?

HTML

<form id="filter-menu">
    <input type="checkbox" id="free" name="free" /><label for="free">Free</label>
    <input type="checkbox" id="sale" name="sale" /><label for="sale">Sale</label>

    <input type="checkbox" id="rooms_1" name="rooms[]" value=1/><label for="rooms_1">1 Room</label>
    <input type="checkbox" id="rooms_2" name="rooms[]" value=2 /><label for="rooms_2">2 Rooms</label>

    <input type="text" id="price" val="100" />

    <button id="apply-filers">Apply Filters</button>
</form>

jQuery

$('#apply-filters').click(function() {
    $('#filter-menu').serializeArray();  // Gives an empty array

    $.post('api/someplace', 
            { free: 1,
            sale: 1,
            rooms: [1, 2],
            price: 100
            }, function() {
                console.log('yay');
            });
});

アップデート

私がする時

JSON.stringify($('filter-form').serializeArray())

私は得る

[{"name":"rooms[]","value":"1"},{"name":"rooms[]","value":"2"}]"

$.post()ただし、 like経由でサーバー側に送信したい

{rooms: [1,2]}

このようにして、サーバー側で実行できるようになります（PHP、フレームワーク関数で処理した後）

$rooms = implode(',', $rooms_array)    // gives `1,2`

MySQLクエリは次のようになります

SELECT .... WHERE rooms IN (1,2)

これは可能ですか？サーバー側に送信するにはどうすればよいでしょうか? また、 からの出力をどのように使用しserializeArray()て にフィードし$.post()ますか?

4

1 に答える 1

1

フォーム要素に属性serializeArrayがないため、メソッドは空の配列を返します。name

<input type="checkbox" id="free" name='something' />

フォームの値をリセットしたい場合は、JavaScriptresetメソッドを使用できます。

$('#close').click(function(){
    $('#something').hide()
    $("#filter-menu")[0].reset();
})

$('#apply-filters').click(function() {
     var room = $('#filter-menu input[name="rooms[]"]:checked').map(function(){
             return this.value
     }).get();  

    $.post('api/someplace', 
            { free: 1,
            sale: 1,
            rooms: room,
            price: 100
            }, function() {
                console.log('yay');
    });
});
于 2012-10-06T19:10:37.557 に答える