jquery form extension ajax

Posted by Craig Wilson on Stack Overflow See other posts from Stack Overflow or by Craig Wilson
Published on 2012-12-15T22:14:04Z Indexed on 2012/12/15 23:03 UTC
Read the original article Hit count: 157

Filed under:
|
|
|

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?!

© Stack Overflow or respective owner

Related posts about php

Related posts about jQuery