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>
<title>Hello world</title>
<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)
Subscribe to our mailing list
Subscribe to our mailing list and receive a free udpates
Rodrigo says
thanks, it helped me a lot !
🙂
mayooresan says
Glad it worked out for you 🙂
Jose Contreras says
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 😉
Keira says
duplicate result. any idea?
mayooresan says
@Jose I’m glad u liked it 🙂
@keira
I have no idea can u show us your code please?
cristian says
@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?
behzadabf says
YoooooooHooooooo
at last one person makes RIGHT… thank you ..thank you…
সিয়াম says
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 ….
rwwrew says
This is a good tutorial
lee says
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?
bob says
cool explication !
Another one here with demo
http://www.mcwehbe.com/demo.php?imenu=4
I hope it will be useful
anks says
thank u
bob says
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?
Jaff says
You can clear the form, $(‘#CategoryFrm’)[0].reset();
abudabi says
it’s not working for me. when i click save it just go to localhost.. please help me, i am a beginner
Nathan says
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.
mayooresan says
@Nathan
Glad it helped you 🙂
Mina says
is it possible to use ajax to make 1 form to submit to 2 pages at the same time with same submit button?
Aritra says
Thanks a lot
Akash says
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.
Justin says
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!
Anon says
I can’t get file with this script, help?
Notice: Undefined index: file in C:xampphtdocsperpustakaanv2pagesbukuprosesinsertbuku.php on line 12
Jitu RaJPUROHIT says
Thank You
anilbabu says
thanks a lot.
Hiroshi says
thanx 🙂