1

ドロップダウン メニューから選択したときに (ページを更新せずに) フォームを送信するようにフォームを設定しようとしています。現在、ドロップダウンが選択されているときに送信するように設定していますが、ページが更新されます。

フォームの私のコードは、

<form action="" method="get">
<select name="day" onchange="this.form.submit();">
<option>Please select a date</option>
<option value="Mon"><?php echo $monday; ?></option>
<option value="Tue"><?php echo $tuesday; ?></option>
<option value="Wed"><?php echo $wednesday; ?></option>
<option value="Thu"><?php echo $thursday; ?></option>
<option value="Fri"><?php echo $friday; ?></option>
</select>
</form>

更新せずにフォームを送信するためのjqueryチュートリアルをいくつか試しましたが、すべて送信ボタンが含まれています。ドロップダウンで選択肢が選択されたときに、フォームの送信をバインドするものが必要です。

どんな助けでも大歓迎です。

編集:ここでの回答のいくつかのアイデア、いくつかのチュートリアル、および多くの試行錯誤を使用して解決しました。やっと解りました。これが機能するコードです

$('#day').change(function() 
{
   $.ajax({
        type: 'post',
        url: "tutoringlistsession.php",
        data: $("form.day").serialize(),
        success: function() {
            $('#list').load('tutoringlist.php', function(){
            });
            $('#list').show("fast");
        }
    });
                return false;
});
4

3 に答える 3

2

フォームの送信イベントにバインドする必要があります。

$("form").on('submit', function (e) {
   //prevent form submission / page refresh
   e.preventDefault();

   //submit form with ajax
   $.get(window.location, $(this).serialize());
});

select清潔さ/一貫性のために、jQueryにもバインドします。

$("form select").on('change', function () {
   $("form").trigger('submit');
});

マークアップを更新する必要がある、より具体的なセレクターも使用します。

于 2012-12-18T19:14:53.633 に答える
0

ここに投稿されたアイデアといくつかのチュートリアルを使用して、答えを見つけました。動作するコードは次のとおりです。

$('#day').change(function() 
{
   $.ajax({
        type: 'post',
        url: "tutoringlistsession.php",
        data: $("form.day").serialize(),
        success: function() {
            $('#list').load('tutoringlist.php', function(){
            });
            $('#list').show("fast");
        }
    });
                return false;
});
于 2012-12-20T23:20:34.117 に答える
0

select 要素の ajax onChange を介してフォームを送信します。

$("select").on('change', function () {
    var thisForm = $(this).closest('form');
    $.get($thisForm.attr('action'), $thisForm.serialize());
});
于 2012-12-18T19:19:37.643 に答える