Update MySQL row automatic at change.

Question

Hi!

I got a kind of admin-panel where I want to be able to change customers order status live without refreshing or changing page. I have figured out that I need to use Javascript, AJAX or jQuery for this but since I have no experience for that and have no time to learn all that I'm asking you for help to achive this.

My code:

<form>
    <select name="status">
        <option value="0">Ej verifierad</option>
        <option value="1">Väntar på betalning</option>
        <option value="2">Postas ASAP</option>
        <option value="3">POSTAD!</option>
        <option value="4">Annulerad</option>
    </select>
</form>

The order status is kept in a MySQL database.

Please note that I will have many forms at one page and only want the update the one that is changen but directly when I change it.

Thanks in advance for answers.

Answer 1

use jQuery for sure. It's the easiest way to make AJAX calls... which are done in JavaScript. So, I guess the best answer is, you'll need all three!

Have a PHP page accept POST parameters, and instead of submitting your form with action="myFormResponder.php" and method="post", leave those intact, and put this at the top of your webpage (before the closing </head> tag):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript">
    $(document).ready(function(){
        $('#myForm').submit(function(){
            $.post("myFormResponder.php",$('#myForm').serialize(), function(data, textStatus, xhr){
                // Do whatever you need here to update your page when the AJAX call finishes
            });
            return false; // Cancel default submit action
        });
    });
</script>

Also, see: jQuery Documentation: $.post(). This will help you understand how to work with the data passed to the callback.

I've basically replaced the onsubmit event with my own event handler. If you wanted to respond every time the select control was changed, instead just attach the handler to the change() event like this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript">
    $(document).ready(function(){
        // NOTE CHANGE IN NEXT TWO LINES
        $('select').change(function(){
            $.post("myFormResponder.php",{status: $(this).val()}, function(data, textStatus, xhr){
                // Again, do what ya gotta do, if ya gotta do it
            });
            return false; // Cancel default submit action
        });
    });
</script>