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

【问题标题】：Javascript submit on onchange, but do not refresh pageJavascript 在 onchange 上提交，但不刷新页面
【发布时间】：2021-06-26 07:53:58
【问题描述】：

我有一个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脚本中放置什么。

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

【问题讨论】：

这是完全可能的，而且您似乎具备了执行此操作所需的所有构建块。发布您的代码并解释没有按照您想要的方式发生的事情。
完全有可能。但是，您很可能最终会自己获得这些字段。
I am not sure if is it possible to submit on onchange...绝对是。如果你愿意，你可以使用 AJAX。究竟是什么问题？你有没有尝试过一些不太奏效的东西？目前还不清楚你被困在哪里。

标签： javascript php refresh onchange

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

尝试这样的事情，将其包装在 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');
};

【讨论】：

你可能要提到这需要 jQuery...