通过 AJAX 提交选择更改表单

Submit form on select change via AJAX

提问by morgi

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.

我想要做的是在不刷新页面的情况下发送选择更改的表单。我知道我必须使用 AJAX 来做到这一点，但我无法完全弄清楚如何实现它。

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 :

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 :

<?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());
?>

采纳答案by rgvcorley

Getting cross browser onchangeevents 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.

获取跨浏览器onchange事件和 AJAX 请求工作并非易事。我建议您使用某种 javascript 框架，它抽象出所有跨浏览器问题，因此您不必担心它们。

Try a js framework

试试js框架

Jqueryis 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.

Jquery就是这样一种框架，它具有诸如.change()将处理程序附加到元素之类的更改事件<select>以及.get()执行 GET 请求等方法。

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.

请注意，要使此代码起作用，您需要在页面上包含带有<script>标记的 jquery 库。

See here for a quick start guide on using jquery

有关使用 jquery 的快速入门指南，请参见此处

And here for a beginners tutorial on how to use jquery's ajax()method

这里是关于如何使用 jqueryajax()方法的初学者教程