如何解决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');
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。