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

我也将绑定到selectjQuery 以及清洁/一致性：

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

我还会使用更具体的选择器，这需要更新您的标记。

于 2012-12-18T19:14:53.633 回答
0

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

$("select").on('change', function () {
    var thisForm = $(this).closest('form');
    $.get($thisForm.attr('action'), $thisForm.serialize());
});
于 2012-12-18T19:19:37.643 回答
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 回答