9lessons programming blog
Loading Search
9lessons Bring Friends
Wall Script
Follow Me:
Tuesday, June 9, 2009

Submit multiple forms with jQuery and Ajax.

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

Submit multiple forms with jQuery and  Ajax.

Download Script     Live Demo

Javascript 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");
}
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; ?>" />
</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.
Comments
{ 119 comments }
Anonymous said...

Check out var datastring = $('#myform').serialize();

Could simplify things...

Anonymous said...

why we should use multiple form in one page? is it recomended? Can not we prevent using multiple form in a single page?

Anonymous said...

great!

Satbir said...

Nice implementation of jQuery!! one thing that's needed is when a comment is submitted, the text in the textarea should be cleared.

Anonymous said...

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.

Anonymous said...

Thank you!

Anonymous said...

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

Anonymous said...

nice

onno said...

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

Noah S said...

Can you use a feature like this to submit multiple forms with

Anonymous said...

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!!

Brad said...

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!

Anonymous said...

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.

Anonymous said...

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?

Anonymous said...

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?

Anonymous said...

Works great thanks.

marengga said...

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

Max Palomino Mendoza said...

Buen aporte a la comunidad cibernauta...

Php Programmer said...

Excellent tutorial. Just wanted to say thanks for taking the time to write it! :)

Anonymous said...

is very good tutorial

hamid said...

hi dear
thanks 4 ur top script
good luck

aam1r said...

Thank you - exactly what I was looking for. Used it with my script in Symfony framework

Vas said...

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?

Anonymous said...

how can we change the details in a basic step?? help us PLEASE

Anonymous said...

good!

Backlinks building said...

But thanks for giving this info.There are definitely some more details to take into consideration.

Atlanta bankruptcy attorneys said...

It was really an interesting and informative article. Pretty cool post!Thanks for sharing this.

ObeIix said...

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

Anonymous said...

Hi, how can I post some other text areas and inputs simultaneoulsly? Can't figure out how to chunk the $_POST var

Christopher Cuizon said...

The concept was really helpful and cool ..awesome dude ahehe

torrent download said...

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...

torrent download said...

Nice information, many thanks to the author. It is incomprehensible to me now, but in general, the usefulness and significance is overwhelming.

Economics said...

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??

Juegos said...

Not a big fan of Ajax but I have to admit is very useful.

ultrasound technician schools said...

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.

Anonymous said...

It's Good..
ThanQ

Anonymous said...

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.

phlebotomist certification said...

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

Anonymous said...

this things really helps.
thx a lot. :)

Acai Berry Drink said...

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.

back street boys tickets said...

i love to be here

NeophyteHeaven said...

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..

Virtual Assistant said...

Wow great, worth checking, Thanks!

PHP Developer india said...

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.

baza firm said...

Great - thanks for sharing

funny valentine poems said...

Really i am impressed from this post....the person who create this post it was a great human..thanks for shared this with us.

cheap linkin park tickets said...

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.

folder printing said...

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.

Anonymous said...

Great - thanks for sharing

sorry messages said...

Nice implementation of jQuery!! one thing that's needed is when a comment is submitted, the text in the textarea should be cleared.

seo services said...

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.

seo services said...

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.

Anonymous said...

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!!!!

Phlebotomy Certification said...

Thanks, I've been looking for how to use AJAX and Jquery together

Anonymous said...

What is the database, can someone tell me please?!

Sabrina said...

Your ideas are brilliant. I agree with your thoughts.

Sudip Vikram said...

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.

leaflet printing said...

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.

hotel amalfi coast said...

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.

small business seo services said...

Very knowledgeable information about jquery. Now we can submit multiple forms with jquery. Its really very interesting.

Phlebotomy Training said...

Thanks Srinivas. This post saved me a lot of time

Grants for college said...

Thanks for the tutorial. Learned a lot more on how to use Ajax and Jquery.

Hussein Gouda said...

great info, thanks

call Ireland said...

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

Anonymous said...

Excellent code, thanks Srinivas!!

I have a question: how to make the DIV refresh (calling a PHP page with variables) after uploading a comment??

Lyrics said...

Thanks, I've been looking for how to use AJAX and Jquery together

phlebotomy training said...

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.

Anonymous said...

OK :)

PUSPASARI said...

how it added to the database msql php

water flosser review said...

Using jQuery for submitting muliple forms sounds like a great technique for user information input.

Mr.Ven said...

How to do this for nested forms like form within a forum ? any idea...

Apps Navigator said...

This is very good for me!

cubicle curtains said...

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.

cubicle curtains said...

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.

Anonymous said...

THANX!!!

android phones said...

ajax, is the way to go. Many developers like using ajax.

latest news today said...

I like this blog so much... Really it is a pleasureful reading for me... Thanks for a nice blog...

Voyage au maroc said...

good post ! really all your blog is nice

diablo 3 items said...

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.

diablo 3 items said...

Any way I'll be subscribing to your feed and I hope you post again soon.

Anonymous said...

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

Jeremy said...

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!

andrew said...

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..

Anonymous said...

Great post.... just that I needed, I finished in 20 min and integrated with cakephp

keygen said...

Hey Bro, really cool! Very convenient and easy way, thanks!

mustafa said...

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?

EnChikiben said...

Good, work..

california seo said...

o in this tutorial I implemented. Down

raymond said...

Hi,
This is a useful script. I have used it on my blog.thank you very much.

Seo Glasgow said...

recomended? Can not we prevent using multiple form in a single page?

Seo Glasgow said...

is when a comment is submitted, the text in the textarea should be c

Web Design said...

I have a problem:
how can I send more than one data in same post? For example one more input text.

after midnight lyrics said...

when a comment is submitted, the text in the textarea should be cl

Anonymous said...

it is very nice

Saturday Update said...

is the admin replying to every question here because i have question regarding insertion. thanks

professional cv writing services said...

e textarea should be cleared.
June 24, 2009 6:24 AM

Anonymous said...

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

Anonymous said...

hii to all

Awesome effect...

online donations said...

Great work buddy, keep it up

SEO Orlando said...

wanted to say that I have really enjoyed reading your very well written blog pos

Mariatral said...

Wouldn't you want to use an array? The inputs would be in the order they were serialized and one more input text.

TourVIP said...

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.

Company Letterheads Printing said...

Thank you for sharing this code with us. I do appreciate it.

newegg coupon said...

Nice implementation of jQuery.

Anonymous said...

nice tutorial

Kevin Ouk said...

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?

home page said...

This is one of the best post I've ever seen, you can include some more ideas in the same theme.

ماليزيا للسياحة said...

good toutrials

renovation cuisine said...

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

Mayank said...

Your post has helped a lot! thanks!

Anonymous said...

How can i deal with "radio button" along with the comments right in the same way.

Anonymous said...

your post really awesome but i am sticked with a problem where i am using radio button along with the comments. please help! thanks....

Visit Website said...

Your blog is really helps for my search and i really like it.. Thanks a lot

click here said...


I 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!

Daniel Massari said...

Hi! Your post helped me too much! Nice article!!

Faith Hnin said...

Thz u so much ... a good idea to handle multiple records.

Marriage Therapy said...

Thank 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.

werkblad said...

Thanks for give me information on this topic. you have sharing very nice post.

werkblad said...

I was looking for something like this…I found it quiet interesting, hopefully you will keep posting such blogs….Keep sharing.

Post a Comment