Can someone show me a tutorial of using jquery to display successful form submission without refreshing the page. Something like that happens on gmail when a message is delivered and the yellow overlay that shows that you message was delivered and then fade outs.
-
Try this jquery.malsup.com/form .This is the one I previously used in my projectsvk– svk2010-09-20 04:30:51 +00:00Commented Sep 20, 2010 at 4:30
-
funny zerkms...i googled a lot but not found what i was looking 4rAyush– Ayush2010-09-20 04:32:14 +00:00Commented Sep 20, 2010 at 4:32
-
1api.jquery.com/submit api.jquery.com/jQuery.postzerkms– zerkms2010-09-20 04:36:53 +00:00Commented Sep 20, 2010 at 4:36
Add a comment
|
1 Answer
Use jQuery+JSON combination something like this:
test.php:
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jsFile.js"></script>
<form action='_test.php' method='post' class='ajaxform'>
<input type='text' name='txt' value='Test Text'>
<input type='submit' value='submit'>
</form>
<div id='testDiv'></div>
_test.php:
<?php
// Code here to deal with your form submitted data.
$arr = array( 'testDiv' => 'Form is successfully submitted.' );
echo json_encode( $arr );
?>
jsFile.js:
jQuery(document).ready(function(){
jQuery('.ajaxform').submit( function() {
$.ajax({
url : $(this).attr('action'),
type : $(this).attr('method'),
dataType: 'json',
data : $(this).serialize(),
success : function( data ) {
for(var id in data) {
jQuery('#' + id).html( data[id] );
}
}
});
return false;
});
});
OR:
You can use jQuery Form Plugin
3 Comments
Ayush
this above code was working fine yesterday but today smthing strange is happening. Instead of adding the content of testDiv along with the content of the page now its going to test.php and showing {testdiv => "delivered" } in an empty page.
Naveed
@Ayush: What did you change in yesterday's code. It is showing JSON data(
{testdiv => "delivered" }) in empty page because of the following possible reasons: 1. May be your jQuery function is not called because you have removed the class='ajaxform' from form tag which is used to capture submit event in jQuery code. 2. May be you have change the selector(.ajaxform) in jQuery('.ajaxform').submit(.....). 3. May be you jQuery code/file is not included properly.Ayush
when i check using firebug it shows me - POST 174.132.194.155/~kunal17/devbuzzr/wp-content/themes/street/… 404 Not Found 1.26s jquery.min.js (line 130) i have checked that the address of sms.php is correct