提交表单无刷新从下拉菜单中选择后(Submit form without refresh after

我试图建立一个形式，使得其提交（不刷新页面）时，选择从下拉菜单中进行。 目前，我有它设置为提交时的下拉是选择，但它刷新页面。

我对形式的代码，

<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;
});

Answer 1:

您需要绑定到表单的提交事件：

$("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');
});

我也将使用更具体的选择，这需要更新您的标记。

Answer 2:

通过选择元素的AJAX的onChange提交表单：

$("select").on('change', function () {
    var thisForm = $(this).closest('form');
    $.get($thisForm.attr('action'), $thisForm.serialize());
});

Answer 3:

我曾经张贴在这里的想法和几个教程找出答案。 工作代码如下：

$('#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;
});

文章来源: Submit form without refresh after selection from dropdown