Two weeks back I had posted "Facebook like multi Toggle Comment Box with jQuery and PHP" I received emails from my readers that asked to me how to submit multiple forms with jQuery and ajax. So in this tutorial I implemented. Download the script just you have to change the database details. Take a look live demo
Download Script 
Live DemoJavascript Code
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" >
$(document).ready(function()
{
$(".comment_submit").click(function(){
var element = $(this);
var Id = element.attr("id");
var test = $("#textboxcontent"+Id).val();
var dataString = 'textcontent='+ test + '&com_msgid=' + Id;
if(test=='')
{
alert("Please Enter Some Text");
}
$("#flash"+Id).show();
$("#flash"+Id).fadeIn(400).html('<img src="ajax-loader.gif" align="absmiddle"> loading.....');
$.ajax({
type: "POST",
url: "insertajax.php",
data: dataString,
cache: false,
success: function(html){
$("#loadplace"+Id).append(html);
$("#flash"+Id).hide();
}
});
}return false;});});
</script>
<script type="text/javascript" >
$(document).ready(function()
{
$(".comment_submit").click(function(){
var element = $(this);
var Id = element.attr("id");
var test = $("#textboxcontent"+Id).val();
var dataString = 'textcontent='+ test + '&com_msgid=' + Id;
if(test=='')
{
alert("Please Enter Some Text");
}
else
{$("#flash"+Id).show();
$("#flash"+Id).fadeIn(400).html('<img src="ajax-loader.gif" align="absmiddle"> loading.....');
$.ajax({
type: "POST",
url: "insertajax.php",
data: dataString,
cache: false,
success: function(html){
$("#loadplace"+Id).append(html);
$("#flash"+Id).hide();
}
});
}return false;});});
</script>
PHP and HTML Code
Here $msg_id from the database more details take a look old post.
<div id="loadplace<?php echo $msg_id; ?>"></div>
<div id="flash<?php echo $msg_id; ?>"></div>
<div class='panel' id="slidepanel<?php echo $msg_id; ?>">
<form action="" method="post" name="<?php echo $msg_id; ?>">
<textarea id="textboxcontent<?php echo $msg_id; ?>" ></textarea><br />
<input type="submit" value=" Comment_Submit "
class="comment_submit" id="<?php echo $msg_id; ?>" />
<div id="flash<?php echo $msg_id; ?>"></div>
<div class='panel' id="slidepanel<?php echo $msg_id; ?>">
<form action="" method="post" name="<?php echo $msg_id; ?>">
<textarea id="textboxcontent<?php echo $msg_id; ?>" ></textarea><br />
<input type="submit" value=" Comment_Submit "
class="comment_submit" id="<?php echo $msg_id; ?>" />
</form>
</div>
insertajax.php
<?php
if(isSet($_POST['textcontent'])){
$textcontent=$_POST['textcontent'];
// Some SQL data values insert into comments table
}
?>
<div class="load_comment"><?php echo $textcontent; ?></div>
Related Posts :
Update a Record with Animation effect using JSP and jQuery.
Facebook like suggestions with jQuery content appears and disappears.
jQuery and Ajax best 9lesson
Submit a Form without Refreshing page with jQuery and Ajax.
Useful jQuery plugins for Web Designers.
Check out var datastring = $('#myform').serialize();
ReplyDeleteCould simplify things...
why we should use multiple form in one page? is it recomended? Can not we prevent using multiple form in a single page?
ReplyDeletegreat!
ReplyDeleteNice implementation of jQuery!! one thing that's needed is when a comment is submitted, the text in the textarea should be cleared.
ReplyDeleteHi,
ReplyDeleteThis is a great script. I am using it on my site. Juast I have a problem:
how can I send more than one data in same post? For example one more input text.
Rhank you very much.
Thank you!
ReplyDeleteI'd like to know how to limit the display of messages as commented on facebook to 5 by example and put a link display like 5 comments on facebook
ReplyDeletenice
ReplyDeleteHere's how to submit multiple form using the prototype library (instead of jquery):
ReplyDeletehttp://tech.solin.eu/doku.php?id=webdev:submitting_multiple_forms_at_once
Onno
Can you use a feature like this to submit multiple forms with
ReplyDeletethis look fantastic - but I need help with install please!
ReplyDeleteI am getting this error --
Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result
could you explain for a beginner how to fix this?
Thanks!!
Hi,
ReplyDeleteI love the script, still trying to understand it 100%. I have a table in my database for comments which includes something like (comment_id, user_id, comment, date).
It appears that this script shows the comment after you post it; however, it will not post to my comment table in my database, which obviously means the comment disappears when you leave the page and return.
I am new to javascript and ajax, slightly better with php... any help with this problem will probably save me some hairs on my head.
Thank you!
Good stuff, but I would like to know how to create the same thing with the ability to submit by hitting the enter key rather than clicking a button.
ReplyDeleteI'm using this script for handle all my forms on the whole webpage. It suddently should more dynamic to grab all keys and values from the form, you have submit, in one time.
ReplyDeleteFor example:
var dataString = "all data i get from $(this)";
how can i grab all fields + values from the form at one time and put it in: var dataString?
Hmm, this doesn't seem to be working correctly for me - it seems to be submitting the form x number of times (where x is the number of forms on the page).
ReplyDeleteAny ideas?
Works great thanks.
ReplyDeletenice tutorial .
ReplyDeletei think it'll be better if you add delete button to remove some "comment" ..
maybe there's some unacceptable or wrong comment
Buen aporte a la comunidad cibernauta...
ReplyDeleteExcellent tutorial. Just wanted to say thanks for taking the time to write it! :)
ReplyDeleteis very good tutorial
ReplyDeletehi dear
ReplyDeletethanks 4 ur top script
good luck
Thank you - exactly what I was looking for. Used it with my script in Symfony framework
ReplyDeleteThank you for sharing this..
ReplyDeleteBut, I had included this script into div of "Update and Delete Records with Animation Slide Effect using Jquery and Ajax.
". Everything is well in IE, but in Firefox makes submit to whole page..Can you help me with this please?
how can we change the details in a basic step?? help us PLEASE
ReplyDeletegood!
ReplyDeleteBut thanks for giving this info.There are definitely some more details to take into consideration.
ReplyDeleteIt was really an interesting and informative article. Pretty cool post!Thanks for sharing this.
ReplyDeleteThanks! I was quite stressed how to handle around 50 forms in one page...
ReplyDeleteI'm curious about the id="1", the definiton of id attribute requires:
* Must begin with a letter A-Z or a-z
* Can be followed by: letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".")
* Values are case-sensitive
Hi, how can I post some other text areas and inputs simultaneoulsly? Can't figure out how to chunk the $_POST var
ReplyDeleteThe concept was really helpful and cool ..awesome dude ahehe
ReplyDeleteGreat script! I just downloaded it but only worried that i would start getting too much spams as i am making the comment form too much...
ReplyDeleteNice information, many thanks to the author. It is incomprehensible to me now, but in general, the usefulness and significance is overwhelming.
ReplyDeleteI love seeing blog that understand the value of providing a quality resource for free. It is the old what goes around comes around routine. Did you want to acquired lots of links and I see lots of track backs??
ReplyDeleteNot a big fan of Ajax but I have to admit is very useful.
ReplyDeleteNice information, valuable and excellent design, as share good stuff with good ideas and concepts, lots of great information and inspiration, both of which we all need, thanks for all the enthusiasm to offer such helpful information here.
ReplyDeleteThis looks absolutely perfect. All these tinny details are made with lot of background knowledge. I like it a lot. This was a useful post and I think it is rather easy to see from the other comments as well that this post is well written and useful.
It's Good..
ReplyDeleteThanQ
Love this article. You saved me loads of time in creating a facebook like wall for my social networking site. Now all I need to figure out is how i'm going to be able to delete the comments.
ReplyDeleteThank you for your post, I look for such article along time,today i find it finally.this postgive me lots of
ReplyDeleteadvise it is very useful for me .i will pay more attention to you ,i hope you can go on posting more such
this things really helps.
ReplyDeletethx a lot. :)
I really love to read articles that have good information and ideas to share to each reader. I hope to read more from you guys and continue that good work that is really inspiring to us.
ReplyDeletei love to be here
ReplyDeleteis there anywhere to make it auto refresh? currently code with
ReplyDeletevar auto_refresh = setInterval(
function ()
{
$('#main_news_info').load('script.php').fadeIn("slow");
}, 10000);
will encounter multiple posts..
Wow great, worth checking, Thanks!
ReplyDeletereally love to read articles that have good information and ideas to share to each reader. I hope to read more from you guys and continue that good work that is really inspiring to us.
ReplyDeleteGreat - thanks for sharing
ReplyDeleteReally i am impressed from this post....the person who create this post it was a great human..thanks for shared this with us.
ReplyDeleteIt is really useful to know that Tribal Fusion represents over 1500 web publishers worldwide. So i just wanna say thank you for the data that you simply have been sharing.
ReplyDeleteThanks. That’s great info for a newbie like me. I even like how you segmented your blog clearly… I’m still trying to get mine that focused. I guess it’s all a work in progress.
ReplyDeleteGreat - thanks for sharing
ReplyDeleteNice implementation of jQuery!! one thing that's needed is when a comment is submitted, the text in the textarea should be cleared.
ReplyDeleteI write my short comment for you to give support for your site.I love reading other people's views on this. It really makes a person think. Thanks for the article.
ReplyDeleteI recently came across your blog and have been reading along. I think I will leave my first comment. I don’t know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.
ReplyDeletecan I have some more information about the inserting in the database!!! How i will insert the reecomemnt of the primary post in the database!!! thanks!!!!
ReplyDeleteThanks, I've been looking for how to use AJAX and Jquery together
ReplyDeleteWhat is the database, can someone tell me please?!
ReplyDeleteYour ideas are brilliant. I agree with your thoughts.
ReplyDeleteUse this little piece of code to refresh the taxtarea or input field after submission of data;
ReplyDelete$("#idnameofdiv").val("");
Use it inside the function which processes the request and sends it to ajax.
thanks for the valuable share here. I worked with Jquery but this stuff i always find difficult to go on.SO i better stick to the Sqlite Manager.
ReplyDeletereally valuable resource.
ReplyDeletejquery was a great problem with me while working on my final year project.But now i am quite proficient on it.
Very knowledgeable information about jquery. Now we can submit multiple forms with jquery. Its really very interesting.
ReplyDeleteThanks Srinivas. This post saved me a lot of time
ReplyDeleteThanks for the tutorial. Learned a lot more on how to use Ajax and Jquery.
ReplyDeletegreat info, thanks
ReplyDeleteJust had to say what a great article this is, have been looking for this information all over the web and stumbled upon it here so thanks for taking the time
ReplyDeleteExcellent code, thanks Srinivas!!
ReplyDeleteI have a question: how to make the DIV refresh (calling a PHP page with variables) after uploading a comment??
Thanks, I've been looking for how to use AJAX and Jquery together
ReplyDeleteThis is just the script I was looking for! You have no idea how many headaches you have just saved me I have been trying to finish a project for three days now.
ReplyDeleteOK :)
ReplyDeletehow it added to the database msql php
ReplyDeleteUsing jQuery for submitting muliple forms sounds like a great technique for user information input.
ReplyDeleteHow to do this for nested forms like form within a forum ? any idea...
ReplyDeleteThis is very good for me!
ReplyDeleteIt is my great pleasure to visit your website and to enjoy your excellent post here. I am happy when reading your blog with updated information. Very interesting article. It’s funny how history can be twisted in so many different ways. I love your article. It can help me get much useful information.
ReplyDeletePretty fine post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I'll be subscribing to your feed and I hope you post again soon.
ReplyDeleteTHANX!!!
ReplyDeleteajax, is the way to go. Many developers like using ajax.
ReplyDeleteI like this blog so much... Really it is a pleasureful reading for me... Thanks for a nice blog...
ReplyDeletegood post ! really all your blog is nice
ReplyDeleteI am using it on my site. Juast I have a problem:
ReplyDeletehow can I send more than one data in same post? For example one more input text.
Any way I'll be subscribing to your feed and I hope you post again soon.
ReplyDeleteI change code but it not run
ReplyDeletePls help me !!!
If ok you can split page reprivo 1 2 3 4 next for comment?
Thank very much
Lang
This is amazing. I've been looking around for a good ajax form submission script that supports multiple forms on the same page.
ReplyDeleteThis is the perfect solution. Thanks!
sir, how about with the same form name and action?is it possible that i have multiple forms to submit at a time and still it saves the data in the db sent by multiple forms?
ReplyDeleteex:
form
username:john
username:andrew
username:george
submit form..
db..
username
john
andrew
george
hoping for your response sir..thank you..
Great post.... just that I needed, I finished in 20 min and integrated with cakephp
ReplyDeleteHey Bro, really cool! Very convenient and easy way, thanks!
ReplyDeleteAmazing tutorial, you make everything so simple.
ReplyDeleteif(isSet($_POST['textcontent']))
{
$comment= $_POST['textcontent'];
$com_msgid = $_POST['com_msgid'];
$sql = mysql_query("INSERT INTO comments (msg_id, comment, com_date) VALUES('$com_msgid', '$comment', now())") or die (mysql_error());
}
This SQL is giving me this Error
---Access denied for user 'ODBC'@'localhost' (using password: NO)---
Any help?
Good, work..
ReplyDeleteo in this tutorial I implemented. Down
ReplyDeleteHi,
ReplyDeleteThis is a useful script. I have used it on my blog.thank you very much.
recomended? Can not we prevent using multiple form in a single page?
ReplyDeleteis when a comment is submitted, the text in the textarea should be c
ReplyDeleteI have a problem:
ReplyDeletehow can I send more than one data in same post? For example one more input text.
when a comment is submitted, the text in the textarea should be cl
ReplyDeleteit is very nice
ReplyDeleteis the admin replying to every question here because i have question regarding insertion. thanks
ReplyDeletee textarea should be cleared.
ReplyDeleteJune 24, 2009 6:24 AM
HI All
ReplyDeleteIn comment box , if i enter script or div like html tag , it getting empty values , so any solution for this kind of issues
hii to all
ReplyDeleteAwesome effect...
Great work buddy, keep it up
ReplyDeletewanted to say that I have really enjoyed reading your very well written blog pos
ReplyDeleteWouldn't you want to use an array? The inputs would be in the order they were serialized and one more input text.
ReplyDeleteIn order to submit multiple forms at the same time you'll need a function that invokes the submit events of each form.The jQuery plugin add an event listener to the onsubmit event of the form(s) you specify.
ReplyDeleteThank you for sharing this code with us. I do appreciate it.
ReplyDeleteNice implementation of jQuery.
ReplyDeletenice tutorial
ReplyDeleteHi, when i'm trying to test insert the data into the database table with the following code in insertajax.php
ReplyDeleteif(isset($_POST['textcontent'])){
$textcontent = $_POST['textcontent'];
$i = mysql_query("INSERT INTO `messages`(`msg`) VALUES('$textcontent')") or die("Cannot insert data!". mysql_error());
if(!$i)
echo "Error adding messages!";
else
echo "Your comments added success!";
}
it says "No database selected"
What's wrong with this?
This is one of the best post I've ever seen, you can include some more ideas in the same theme.
ReplyDeletegood toutrials
ReplyDeleteReally your post is really very good and I appreciate it. It’s hard to sort the good from the bad sometimes, but I think you’ve nailed it. You write very well which is amazing. I really impressed by your post
ReplyDeleteYour post has helped a lot! thanks!
ReplyDeleteHow can i deal with "radio button" along with the comments right in the same way.
ReplyDeleteyour post really awesome but i am sticked with a problem where i am using radio button along with the comments. please help! thanks....
ReplyDeleteYour blog is really helps for my search and i really like it.. Thanks a lot
ReplyDelete
ReplyDeleteI am really enjoying reading your well written articles. I think you spend numerous effort and time updating your blog. I have bookmarked it and I am taking a look ahead to reading new articles. Please keep up the good articles!
Hi! Your post helped me too much! Nice article!!
ReplyDeleteThz u so much ... a good idea to handle multiple records.
ReplyDeleteThank you for the work you have put into your nice blog. We will bookmark to your blog because it is very informational. We love the site and will come back to see your new posts.
ReplyDeleteHello!Please can anyone help me to do this work with jsp?I have searched in google but i can't find something like that.I want this tutorial but i want to integrate in jsp file using struts.Please Help!
ReplyDeleteThanks for give me information on this topic. you have sharing very nice post.
ReplyDeleteI was looking for something like this…I found it quiet interesting, hopefully you will keep posting such blogs….Keep sharing.
ReplyDeletethanks for the valuable share here
ReplyDeleteI just experienced your blog as well as cherished this a great deal. I bookmarked it, keep up the great function!
ReplyDeleteGreat info i have got here keep it up.
ReplyDeleteFill in this blog probably less I understand it, but not too bad for a beginner readers, like me.
ReplyDeletenice tutorials
ReplyDeleteand action for result
ReplyDeleteThanks for sharing! I also looking for the code to fetch the multiple data from database.
ReplyDeleteplease write all table for database
ReplyDeleteI beg you
ReplyDeleteType the full script
You can add comments, date and name of the commenter
As well as add respond, date and name of the person I tried a lot in the code nuisance caused me a lot, I'm trying two weeks ago in which I could not
How to update radio button value in while loop using ajax,mysql,php
ReplyDeletehow can I upload multiple photo?
ReplyDeleteIts great I have same problem but after read this article. I solved my problem and I really like your informative article.
ReplyDeleteThanks for with sharing us.