Javascript 在 onchange 上提交，但不刷新页面

问题描述

我有一个带有 form 和 <select> 的 <checkBox>。 我不想提交按钮，我想在表单上使用 onchange 来“检测”更改并提交数据。我正在使用 PHP 处理数据，并且我想要一个解决方案在 onchange 上提交数据但不刷新页面。我读了很多文章和问答，我试过 AJAX，但我不确定是否可以在 onchange 上提交，没有提交按钮和页面刷新。

已编辑： 为简单起见，假设一位老师教 2 个年级。他想看到每个年级的所有名字，但他也想按结果过滤学生，结果可以是好也可以是坏。

代码：

<form action="#" method="post" id="student_form" onchange="showResult()">

<select name="students" id="students" >
<option value="" disabled>Select a garde</option>
<option value="all">Show all</option>
<option value="grade1">Grade 1</option>
<option value="grade2">Grade 2</option>
</select>

<input type="checkBox" name="result[]" value="good"<label>Good</label>
<input type="checkBox" name="result[]" value="bad"<label>Bad</label>

</form>

JS：

function showResult()
{

document.getElementById("student_form").submit();

}

这里我知道是立即刷新，但是我自己的想法有点迷失，所以我不知道在提交数据但不刷新页面的JS脚本中放什么。

我希望每次教师从选择或复选框中进行选择时，它都会“更新”结果。

解决方法

您可以在 Ajax 中使用 jQuery 并使用 jQuery 选择器选择元素并使用 jQuery 触发 onChange 事件，在该函数中，您可以获取元素的数据并通过调用 ajax 传递该数据

我认为您无法检测到 <form /> 级别的变化，但您可以为每个输入（onchange() 或 <select>）添加 <checkbox> 事件，例如：

<select onchange="validateData()" />
<checkbox onchange="validateData()" />

然后在 validateData() 函数中，您可以调用 AJAX 手动提交表单。

PS：您可以考虑使用 <form onsubmit="event.preventDefault(); validateData()" /> 。 event.preventDefault() 将阻止页面重新加载。

尝试这样的事情，将其包装在 if 语句中，在更改表单时，运行您的 ajax 并将您的值发送回数据库。

   if ($('#form').change(function(){
    
    select = $('#select').val(); 
    checkbox = $('#checkbox').val();
    
    $.ajax({
        type:       "POST",url:        "YourUrl",dataType:   "html",data: {
            select: select,checkbox: checkbox
        },beforeSend: function() {
            console.log('Test here');           
        }
        })
        .done(function(response){           
            console.log('Sent Data');           
        })
        .fail(function(response){

              alert( 'INTERNAL ERROR' );
                
            
        });
}else{
    console.log('Not working');
};

javascript onchange onchange refresh refresh refresh