Submit multiple forms with jQuery and Ajax.
Wall Script
Follow Me:
Tuesday, June 09, 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.
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


130 comments:

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

    Could simplify things...

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

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

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

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

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

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

    ReplyDelete
  8. 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!!

    ReplyDelete
  9. 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!

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

    ReplyDelete
  11. 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?

    ReplyDelete
  12. 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?

    ReplyDelete
  13. Works great thanks.

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

    ReplyDelete
  15. Buen aporte a la comunidad cibernauta...

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

    ReplyDelete
  17. is very good tutorial

    ReplyDelete
  18. hi dear
    thanks 4 ur top script
    good luck

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

    ReplyDelete
  20. 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?

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

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

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

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

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

    ReplyDelete
  26. Christopher CuizonOctober 5, 2010 at 12:38 AM

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

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

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

    ReplyDelete
  29. 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??

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

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

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

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

    ReplyDelete
  34. this things really helps.
    thx a lot. :)

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

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

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

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

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

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

    ReplyDelete
  41. Great - thanks for sharing

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

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

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

    ReplyDelete
  45. 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!!!!

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

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

    ReplyDelete
  48. Your ideas are brilliant. I agree with your thoughts.

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

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

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

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

    ReplyDelete
  53. Thanks Srinivas. This post saved me a lot of time

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

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

    ReplyDelete
  56. Excellent code, thanks Srinivas!!

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

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

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

    ReplyDelete
  59. how it added to the database msql php

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

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

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

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

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

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

    ReplyDelete
  66. good post ! really all your blog is nice

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

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

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

    ReplyDelete
  70. 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!

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

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

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

    ReplyDelete
  74. 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?

    ReplyDelete
  75. o in this tutorial I implemented. Down

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

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

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

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

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

    ReplyDelete
  81. it is very nice

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

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

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

    ReplyDelete
  85. hii to all

    Awesome effect...

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

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

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

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

    ReplyDelete
  90. 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?

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

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

    ReplyDelete
  93. Your post has helped a lot! thanks!

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

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

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

    ReplyDelete

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

    ReplyDelete
  98. Hi! Your post helped me too much! Nice article!!

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

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

    ReplyDelete
  101. Hello!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!

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

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

    ReplyDelete
  104. I just experienced your blog as well as cherished this a great deal. I bookmarked it, keep up the great function!

    ReplyDelete
  105. Fill in this blog probably less I understand it, but not too bad for a beginner readers, like me.

    ReplyDelete
  106. Thanks for sharing! I also looking for the code to fetch the multiple data from database.

    ReplyDelete
  107. I beg you
    Type 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

    ReplyDelete
  108. How to update radio button value in while loop using ajax,mysql,php

    ReplyDelete

Make in India