在通过AJAX选择更改提交表单 [英] Submit form on select change via AJAX
问题描述
让我们说我有这种形式：
＆LT;形式的行动=变化status.php的方法=邮报＆GT;
＆LT;选择类=changeStatusNAME =changeStatus＆GT;
＆LT;期权价值=0＆GT;启动＆LT; /选项＆GT;
＆LT;期权价值=1＆GT;正在进行＆LT; /选项＆GT;
＆LT;期权价值=2温度逐渐＆LT; /选项＆GT;
＆LT; /选择＆GT;
＆LT;输入类=projectId类型=隐藏名称=projectId值=＆LT; PHP的echo $数据['身份证'];？＆GT;/＆GT;
＆LT; /形式GT;
我目前使用这个脚本来提交表单，但它意味着令人耳目一新：
$（'选择'）。改变（函数（）
{
$（本）.closest（形式）提交（）;
}）;
我想要做的是在选择变革的无需刷新页面发送的形式。我知道我必须使用AJAX来这样做，但我不能完全弄清楚如何实现它。
你能定位我如何做到这一点？
感谢您的帮助。
编辑：
在考虑的意见考虑进去，我结束了以下code：
HTML：
＆LT;形式的行动=的方法=邮报＆GT;
＆LT;选择类=changeStatusNAME =changeStatus＆GT;
＆LT;期权价值=0＆GT;启动＆LT; /选项＆GT;
＆LT;期权价值=1＆GT;正在进行＆LT; /选项＆GT;
＆LT;期权价值=2温度逐渐＆LT; /选项＆GT;
＆LT; /选择＆GT;
＆LT;输入类=projectId类型=隐藏名称=projectId值=＆LT; PHP的echo $数据['身份证'];？＆GT;/＆GT;
＆LT; /形式GT;
记者：
$（文件）。就绪（函数（）{
$（'select.changeStatus'）。改变（函数（）{
$阿贾克斯（{
键入：POST，
网址：变化status.php，
数据：{selectFieldValue：$（'select.changeStatus）VAL（），projectId：$（'输入[名$ =projectId]）VAL（）}，
数据类型：HTML
}）;
}）;
}）;
PHP：
＆LT; PHP
包括（'../包含/将connect.php）;
$ changeStatus = $ _ POST ['selectFieldValue'];
的$ id = $ _ POST ['projectId'];
$ SQL =更新项目设置进度='$ changeStatus。WHERE ID ='的$ id。';
的mysql_query（$的SQL）或死亡（ERREUR：.mysql_error（））;
？＆GT;
获得跨浏览器的的onchange 事件和Ajax请求的工作是不平凡的。我建议你使用某种类型的，它抽象了所有的跨浏览器问题的JavaScript框架，所以你不必担心。
尝试JS框架
Jquery的就是这样的一个框架，它拥有一些方法如的 .change（） 它附加一个处理程序更改事件像获得（） 它执行一个GET请求。
下面是让你开始的code一点点： -
//将$的简写一个jQuery函数，然后你可以使用jQuery
//选择这在本质上是相同的CSS选择器，所以在这里
//我们选择您的选择字段，然后绑定功能
//它的变化事件处理程序
$（'select.changeStatus'）。改变（函数（）{
//可以使用.VAL（）方法来访问你的选择字段的值
警报（选择字段的值更改为'+ $（'select.changeStatus）VAL（））;
//可以使用阿贾克斯执行一个Ajax请求（）方法
$阿贾克斯（{
键入：GET，
网址：changeStatus.php'，//这是将被请求的URL
//这是值的对象，将被作为GET变量，
//可里面changeStatus.php为$ _GET ['selectFieldValue']等..
数据：{selectFieldValue：$（'select.changeStatus）VAL（）}，
//这是做一次成功的请求已完成 - 如果
//你想要做什么，然后干脆不包含它。但我建议你
//添加一些东西让你知道使用该数据库已更新
成功：函数（HTML）{做一些与响应}，
数据类型：HTML
}）;
}）;
以下参考会比我更好的解释
请注意，此code正常工作，您将需要包括jQuery库你页面用＆LT;脚本＆GT; 标记
Let's say I have this form :
<form action="Change-status.php" method="post">
<select class="changeStatus" name="changeStatus">
<option value="0">Starting</option>
<option value="1">Ongoing</option>
<option value="2">Over</option>
</select>
<input class="projectId" type="hidden" name="projectId" value="<?php echo $data['id'];?>"/>
</form>
I am currently using this script to submit the form, but it implies refreshing :
$('select').change(function ()
{
$(this).closest('form').submit();
});
What I want to do is to send the form on select change without refreshing the page. I know I have to use AJAX to do so but I couldn't exactly figure out how to implement it.
Could you orient me on how to do this?
Thanks for your help.
EDIT :
After taking comments into consideration, I ended up with the following code :
Html :
<form action="" method="post">
<select class="changeStatus" name="changeStatus">
<option value="0">Starting</option>
<option value="1">Ongoing</option>
<option value="2">Over</option>
</select>
<input class="projectId" type="hidden" name="projectId" value="<?php echo $data['id'];?>"/>
</form>
JS :
$(document).ready(function() {
$('select.changeStatus').change(function(){
$.ajax({
type: 'POST',
url: 'Change-status.php',
data: {selectFieldValue: $('select.changeStatus').val(), projectId: $('input[name$="projectId"]').val()},
dataType: 'html'
});
});
});
PHP :
<?php
include('../Include/Connect.php');
$changeStatus=$_POST['selectFieldValue'];
$id=$_POST['projectId'];
$sql='UPDATE project SET progress="'.$changeStatus.'" WHERE id="'.$id.'"';
mysql_query($sql) or die("Erreur: ".mysql_error());
?>
Getting cross browser onchange events and AJAX requests working isn't trivial. I'm recommend you use a javascript framework of some kind, which abstracts away all of the cross browser issues so you don't have to worry about them.
Try a js framework
Jquery is just one such framework which has methods such as .change() which attaches a handler to the change event for elements like <select> and .get() which performs a GET request.
Here's a little bit of code to get you started:-
// The $ is the shorthand for a jquery function, you can then use jquery
// selectors which are essentially the same as css selectors, so here
// we select your select field and then bind a function to
// it's change event handler
$('select.changeStatus').change(function(){
// You can access the value of your select field using the .val() method
alert('Select field value has changed to' + $('select.changeStatus').val());
// You can perform an ajax request using the .ajax() method
$.ajax({
type: 'GET',
url: 'changeStatus.php', // This is the url that will be requested
// This is an object of values that will be passed as GET variables and
// available inside changeStatus.php as $_GET['selectFieldValue'] etc...
data: {selectFieldValue: $('select.changeStatus').val()},
// This is what to do once a successful request has been completed - if
// you want to do nothing then simply don't include it. But I suggest you
// add something so that your use knows the db has been updated
success: function(html){ Do something with the response },
dataType: 'html'
});
});
Some references that will be better than my explanations
Please note for this code to work you will need to include the jquery library on you page with a <script> tag.
See here for a quick start guide on using jquery
And here for a beginners tutorial on how to use jquery's ajax() method
这篇关于在通过AJAX选择更改提交表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
