jquery form extension ajax
- by Craig Wilson
http://www.malsup.com/jquery/form/#html
I have multiple forms on a single page. They all use the same class "myForm".
Using the above extension I can get them to successfully process and POST to ajax-process.php
<script>
// wait for the DOM to be loaded
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('.myForm').ajaxForm(function() {
alert("Thank you for your comment!");
});
});
</script>
I'm having an issue however with the response. I need to get the comment that the user submitted to be displayed in the respective div that it was submitted from. I can either set this as a hidden field in the form, or as text in the ajax-process.php file.
I can't work out how to get the response from ajax-process.php into something I can work with in the script, if I run the following it appends to all the forms (obviously).
The only way I can think to do it is to repeat the script using individual DIV ID's instead of a single class. However there must be a way of updating the div that the ajax-process.php returns!
// prepare the form when the DOM is ready
$(document).ready(function() {
// bind form using ajaxForm
$('.myForm').ajaxForm({
// target identifies the element(s) to update with the server response
target: '.myDiv',
// success identifies the function to invoke when the server response
// has been received; here we apply a fade-in effect to the new content
success: function() {
$('.myDiv').fadeIn('slow');
}
});
});
Any suggestions?!
