Question

我正在尝试设置一个表单，以便在从下拉菜单中进行选择时提交（不刷新页面）。我现在将其设置为在选择下拉列表时提交，但它会刷新页面。

表单的代码是，

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

我还会使用jQuery绑定到select以及清洁/一致性：

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

从下拉列表中选择后，提交表单而不刷新

3 个答案: