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

【问题标题】：Submit form without refresh after selection from dropdown从下拉列表中选择后提交表单而不刷新
【发布时间】：2023-03-11 01:53:01
【问题描述】：

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

我的表单代码是，

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

【问题讨论】：

this.form.submit() 据我所知就像一个提交按钮
在不刷新的情况下提交提交教程并在选择时将其更改为这样做应该不会太费力，向我们展示您的尝试
请在下面发布您的解决方案作为答案。 “接受”你自己的答案是完全可以的。这样，问题就被“封闭”了。

标签： php jquery forms

【解决方案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');
});

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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;
});

【讨论】：