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!
Thanks ever so much, very useful article. If you do not mind, please visit my article related to travel to Pandeglang district in Banten, Indonesia at Kenali dan Kunjungi Objek Wisata di Pandeglang
Best regards
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
I don’t know If I said it already, but this so good stuff keep up the good work. I read a lot of blogs on a daily basis and for the most part Kenali dan Kunjungi Objek Wisata di Pandeglang just wanted to make a quick comment to say I’m glad I found your blog. Thanks.
Best regards
Seo Motivation automotive
I havent any word to appreciate this post.....Really i am impressed from this post....the person who create this post it was a great human..thanks for shared this with us.
I
Best regards
Seo Go Blog Love For Blogging
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
Definetelly good scripting.I had some good ideas to update my script..Thanks.
Barron @ BTscene
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