Submit PHP form without refreshing the page with jQuery and Ajax

There are so many tutorials on this topic but not a single one to get started for absolute beginners. Here comes the easy to understand tutorial :)

html form


<html>
	<head>
		
		<script type="text/javascript" src="jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("#CategoryFrm").submit(function(event) {

				    /* stop form from submitting normally */
				    event.preventDefault(); 
				    
				    $.post( 'controller.php', $("#CategoryFrm").serialize(),
				      function( data ) {
				          $("#status").append(data);
				      }
				    );
				  });
			});
		</script>
	</head>
	<body>
		<div id="status"></div>
		<form action="/" method="post" id="CategoryFrm">
			<input type="text" name="category">
			<input type="submit" value="Save">
		</form>
	</body>
</html>

PHP Script (controller.php)

<?php
	$categoryName = $_POST['category'];
	echo $categoryName;
?>
Did you enjoy this article?
Signup today and receive free updates straight in your inbox. We will never share or sell your email address.

25 Comments

  1. thanks, it helped me a lot !
    :)

    Reply
  2. Glad it worked out for you :)

    Reply
  3. Thanks, you didn’t event have to explain it, it was self explanatory, but a lot of the tutorials online tend to go overboard, this was simple and to the point, now I have a proper ajax form 😉

    Reply
  4. duplicate result. any idea?

    Reply
  5. @Jose I’m glad u liked it :)

    @keira
    I have no idea can u show us your code please?

    Reply
  6. @moyooresan
    Hey, if you do multiple submits you get multiple responses in the status div without clearing the previous one, any ideeas how to fix it?

    Reply
  7. YoooooooHooooooo
    at last one person makes RIGHT… thank you ..thank you…

    Reply
  8. It’s a great one but I got one problem how can I check that weather the data is valid or not something like email or phone number ….

    Reply
  9. This is a good tutorial

    Reply
  10. Great post but if you do multiple submits you get multiple responses in the status div without clearing the previous one, how can i fix it to show only one?

    Reply
  11. thank u

    Reply
  12. Thank you work fine!

    Can this work with forms and inputs for uploading files ($_FILES) also? If yes, how? Can you please provide an example?

    Reply
  13. You can clear the form, $(‘#CategoryFrm’)[0].reset();

    Reply
  14. it’s not working for me. when i click save it just go to localhost.. please help me, i am a beginner

    Reply
  15. Wow, thank you so much! I agree that a lot of the other tutorials with 20-30 fields and all the validation included made it difficult to understand the ajax form submission. Thanks for clearing this up.

    Reply
  16. @Nathan
    Glad it helped you :)

    Reply
  17. is it possible to use ajax to make 1 form to submit to 2 pages at the same time with same submit button?

    Reply
  18. Thanks a lot

    Reply
  19. Best one,
    But when i re-submit the form ,the content in area gets concat.

    Any solution to clear the content first before new values render ? Thanks.

    Reply
  20. Thanks for the post! Hope you don’t mind if I ask. But how would you get this to work with two forms on the page? Thanks so much!

    Reply
  21. I can’t get file with this script, help?
    Notice: Undefined index: file in C:xampphtdocsperpustakaanv2pagesbukuprosesinsertbuku.php on line 12

    Reply
  22. Thank You

    Reply
  23. thanx :)

    Reply

Leave a Reply