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();
Could 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?
great!
Nice implementation of jQuery!! one thing that's needed is when a comment is submitted, the text in the textarea should be cleared.
Hi,
This 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!
I'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
nice
Here's how to submit multiple form using the prototype library (instead of jquery):
http://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
this look fantastic - but I need help with install please!
I 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,
I 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.
I'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.
For 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).
Any ideas?
Works great thanks.
nice tutorial .
i 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...
Excellent tutorial. Just wanted to say thanks for taking the time to write it! :)
is very good tutorial
hi dear
thanks 4 ur top script
good luck
Thank you - exactly what I was looking for. Used it with my script in Symfony framework
Thank you for sharing this..
But, 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
good!
But thanks for giving this info.There are definitely some more details to take into consideration.
It was really an interesting and informative article. Pretty cool post!Thanks for sharing this.
Thanks! I was quite stressed how to handle around 50 forms in one page...
I'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
The concept was really helpful and cool ..awesome dude ahehe
Great 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...
Nice information, many thanks to the author. It is incomprehensible to me now, but in general, the usefulness and significance is overwhelming.
I 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??
Not a big fan of Ajax but I have to admit is very useful.
Nice 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.
This 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..
ThanQ
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.
Thank you for your post, I look for such article along time,today i find it finally.this postgive me lots of
advise 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.
thx 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.
i love to be here
is there anywhere to make it auto refresh? currently code with
var auto_refresh = setInterval(
function ()
{
$('#main_news_info').load('script.php').fadeIn("slow");
}, 10000);
will encounter multiple posts..
Wow great, worth checking, Thanks!
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.
Great - thanks for sharing
Really i am impressed from this post....the person who create this post it was a great human..thanks for shared this with us.
It 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.
Thanks. 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.
Great - thanks for sharing
Nice implementation of jQuery!! one thing that's needed is when a comment is submitted, the text in the textarea should be cleared.
I 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.
I 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.
can 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!!!!
Thanks, I've been looking for how to use AJAX and Jquery together
What is the database, can someone tell me please?!
Your ideas are brilliant. I agree with your thoughts.
Use this little piece of code to refresh the taxtarea or input field after submission of data;
$("#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.
really valuable resource.
jquery 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.
Thanks Srinivas. This post saved me a lot of time
Thanks for the tutorial. Learned a lot more on how to use Ajax and Jquery.
great info, thanks
Just 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
Excellent code, thanks Srinivas!!
I 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
This 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.
OK :)
how it added to the database msql php
Using jQuery for submitting muliple forms sounds like a great technique for user information input.
How to do this for nested forms like form within a forum ? any idea...
This is very good for me!
It 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.
Pretty 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.
THANX!!!
ajax, is the way to go. Many developers like using ajax.
I like this blog so much... Really it is a pleasureful reading for me... Thanks for a nice blog...
good post ! really all your blog is nice
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.
Any way I'll be subscribing to your feed and I hope you post again soon.
I change code but it not run
Pls 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.
This 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?
ex:
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
Hey Bro, really cool! Very convenient and easy way, thanks!
Amazing tutorial, you make everything so simple.
if(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..
o in this tutorial I implemented. Down
Hi,
This 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?
is when a comment is submitted, the text in the textarea should be c
I have a problem:
how 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
it is very nice
is the admin replying to every question here because i have question regarding insertion. thanks
e textarea should be cleared.
June 24, 2009 6:24 AM
HI All
In 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
Awesome effect...
Great work buddy, keep it up
wanted to say that I have really enjoyed reading your very well written blog pos
Wouldn't you want to use an array? The inputs would be in the order they were serialized and one more input text.
In 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.
Thank you for sharing this code with us. I do appreciate it.
Nice implementation of jQuery.
nice tutorial
Hi, when i'm trying to test insert the data into the database table with the following code in insertajax.php
if(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.
good toutrials
Really 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
Your post has helped a lot! thanks!