AJAX\JQUERY: Update MYSQL database with form data without refreshing

You will need to catch the click of the button. And make sure you stop propagation.

$('checklistSubmit').click(function(e) {
    $(e).stopPropagation();

    $.post({
        url: 'checklist.php'
        data: $('#checklist').serialize(),
        dataType: 'html'
        success: function(data, status, jqXHR) {
           $('div.successmessage').html(data);
           //your success callback function
        } 
        error: function() {
           //your error callback function
        } 
    });
});

That's just something I worked up off the top of my head. Should give you the basic idea. I'd be happy to elaborate more if need be.

Check out jQuery's documentation of $.post for all the nitty gritty details.

http://api.jquery.com/jQuery.post/

Edit:

I changed it to use jquery's serialize method. Forgot about it originally.

More Elaboration:

Basically when the submit button is clicked it will call the function specified. You want to do a stop propagation so that the form will not submit by bubbling up the DOM and doing a normal submit.

The $.post is a shorthand version of $.ajax({ type: 'post'});

So all you do is specify the url you want to post to, pass the form data and in php it will come in just like any other request. So then you process the POST data, save your changes in the database or whatever else and send back JSON data as I have it specified. You could also send back HTML or XML. jQuery's documentation shows the possible datatypes.

In your success function will get back data as the first parameter. So whatever you specified as the data type coming back you simply use it how you need to. So let's say you wanted to return some html as a success message. All you would need to do is take the data in the success function and place it where you wanted to in the DOM with .append() or something like that.

Clear as mud?

You need two scripts here: one that runs the AJAX (better to use a framework, jQuery is one of the easiest for me) and a PHP script that gets the Post data and does the database update.

I'm not going to give you a full source (because this is not the place for that), but a guide. In jQuery you can do something like this:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() { // DOM is ready
    $("form#checklist").submit(function(evt) {
        evt.preventDefault(); // Avoid the "submit" to work, we'll do this manually
        var data = new Array();
        var dynamicInputs = $("input,select", $(this)); // All inputs and selects in the scope of "$(this)" (the form)

        dynamicInputs.each(function() {
            // Here "$(this)" is every input and select
            var object_name = $(this).attr('name');
            var object_value = $(this).attr('value');
            data[object_name] = object_value; // Add to an associative array
        });

        // Now data is fully populated, now we can send it to the PHP
        // Documentation: http://api.jquery.com/jQuery.post/
        $.post("http://localhost/script.php", data, function(response) {
            alert('The PHP returned: ' + response);
        });
    });
});
</script>

Then take the values from $_POST in PHP (or any other webserver scripting engine) and do your thing to update the DB. Change the URL and the data array to your needs.

Remember that data can be like this: { input1 : value1, input2 : value2 } and the PHP will get something like $_POST['input1'] = value1 and $_POST['input2'] = value2.

This is how i post form data using jquery

$.ajax({
    url: 'http://example.com',
    type: 'GET',
    data: $('#checklist').serialize(),
    cache: false,
}).done(function (response) {
    /* It worked */
}).fail(function () {
    /* It didnt worked */
});

Hope this helps, let me know how you get on!