Update MySQL row automatic at change

Question

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.

virstulte · Accepted Answer · 2010-07-15 08:43:22Z

3

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"></script>
<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"></script>
<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>

edited Jul 15, 2010 at 8:43

answered Jul 15, 2010 at 8:32

virstulte

2931 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

virstulte Over a year ago

jQuery is extremely flexible, you either treat all forms on the page the same or handle specific forms by ID if you choose, or even a combination of both... if you would like, I can work with you one-on-one in greater detail if you email me your specifics. I frequently check aevins at gmail dot com. I guess the short answer to your question is yes, it will work, but we'll have to modify the actual JavaScript code to fit both your PHP script and DOM structure.

Collectives™ on Stack Overflow

Update MySQL row automatic at change

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related