Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>You will need to catch the click of the button. And make sure you stop propagation.</p> <pre><code>$('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 } }); }); </code></pre> <p>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.</p> <p>Check out jQuery's documentation of $.post for all the nitty gritty details.</p> <p><a href="http://api.jquery.com/jQuery.post/" rel="nofollow">http://api.jquery.com/jQuery.post/</a></p> <p>Edit: </p> <p>I changed it to use jquery's serialize method. Forgot about it originally.</p> <p>More Elaboration:</p> <p>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. </p> <p>The $.post is a shorthand version of $.ajax({ type: 'post'});</p> <p>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. </p> <p>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.</p> <p>Clear as mud?</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload