9Lessons: Multiple Form Submission

Sergio had sent me a very impressive link that had helped him out a few weeks back. How do you submit multiple forms with jQuery and Ajax? Well if you think about Facebook for a minute, each box that you are posting to is an instance of a form. This means that there needs the ability to make several form submissions without page reloading. Can you imagine what would happen if every time you posted on someone’s wall or chat the page reloaded? I know I would rarely use their service. So to counter that horrendous problem, Facebook uses a similar method as below.

 

Submit multiple forms with jQuery and  Ajax.

This is NOT my code. This was taken from 9 lessons.

 

Javascript Code

< script type="text/javascript" src="jquery.js">
< 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(' 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

< div id="loadplace< ?php echo $msg_id; ?>">
< div id="flash">
< 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; ? >" >< 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; ?>

As you can see the value of being able to have multiple form submissions can not be underrated. To see a full demo check out the link above. I will be developing a simple chat script for download utilizing multiple form submissions similar to the Facebook chat of old where you could have multiple windows open.

If you wanted to mass style the form submission it would be easy to take something like jqTransform or better yet utilize the article on CSS form styling for a more contemporary method!