Gmail / Facebook Style Chat Application
Details Live Demo Download


Posted: Monday 1st of October 2012

Submit form without Refreshing Page using Ajax and Jquery



This Tutorial will help and teach you how to submit your forms without refreshing your website page which is time consuming and annoying using Ajax and Jquery.

Unlike PHP form where each time you click on your submit button, the whole page refreshes and most time when your internet connection is slow, page will take longer time to appear for you to proceed with your form submission.

Ajax and Jqery have made life easier for us all. We no longer need to refresh our website pages while forms are been submitted and this is cool guys.





HTML Code:

<center>
<div style="width:620px; padding:10px; border:10px solid #F6F6F6;">

<div style="width:600px;float:left;padding:10px;" align="left"><div id="submit_without_page_refresh_status" style="font-family: helvetica, arial, 'lucida grande', sans-serif; font-size:12px; color:black;"></div></div><br clear="all">

<div style="width:100px;float:left;padding:10px;padding-top:16px;font-family: helvetica, arial, 'lucida grande', sans-serif; font-size:12px; color:black;" align="left">Your Fullname:</div>
<div style="width:400px;float:left;padding:10px;" align="left"><input type="text" id="fullname" class="location_to_send_files"></div><br clear="all">

<div style="width:100px;float:left;padding:10px;padding-top:16px;font-family: helvetica, arial, 'lucida grande', sans-serif; font-size:12px; color:black;" align="left">Email Address:</div>
<div style="width:400px;float:left;padding:10px;" align="left"><input type="text" id="email" class="location_to_send_files"></div><br clear="all">

<div style="width:100px;float:left;padding:10px;font-family: helvetica, arial, 'lucida grande', sans-serif; font-size:12px; color:black;" align="left">Your Comment:</div>
<div style="width:400px;float:left;padding:10px;" align="left"><textarea id="comment" class="location_to_send_files" style="width:300px; height:100px;"></textarea></div><br clear="all">

<div style="width:100px;float:left;padding:10px;font-family: helvetica, arial, 'lucida grande', sans-serif; font-size:12px; color:black;" align="left">&nbsp;</div>
<div style="width:400px;float:left;padding:10px;" align="left"><button style="width:80px; padding:8px; cursor:pointer;" onClick="submit_without_page_refresh();">Submit</button></div><br clear="all">

</div>
</center>



Ajax and Jquery Code:
<script language="javascript" type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
function submit_without_page_refresh()
{
      //alert("YES SIR");
      var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
      var fullname = $("#fullname").val();
      var email = $("#email").val();
      var comment = $("#comment").val();

      if(fullname == "")
      {
            $("#submit_without_page_refresh_status").html('<div class="notice" align="left">Please enter your fullname to get started.</div>');
            $("#fullname").focus();
      }
      else if(email == "")
      {
            $("#submit_without_page_refresh_status").html('<div class="notice" align="left">Please enter your email address to proceed.</div>');
            $("#email").focus();
      }
      else if(reg.test(email) == false)
      {
            $("#submit_without_page_refresh_status").html('<div class="notice" align="left">Please enter a valid email address ya.</div>');
            $("#updates_subscription").focus();
      }
      else if(comment == "")
      {
            $("#submit_without_page_refresh_status").html('<div class="notice" align="left">Please enter your comment to go.</div>');
            $("#comment").focus();
      }
      else
      {
            var dataString = 'fullname='+ fullname + '&email='+ email + '&comment='+ comment;
            $.ajax({
                  type: "POST",
                  url: "submit_form_without_page_refresh.php",
                  data: dataString,
                  cache: false,
                  beforeSend: function()
                  {
                       $("#submit_without_page_refresh_status").html('<div style="padding-left:100px;"><img src="loading.gif" alt="Sending...." align="absmiddle" title="Sending...."/> <font style="font-family: helvetica, arial, 'lucida grande', sans-serif; font-size:12px; color:black;">Please wait...</font></div><br clear="all">');
                  },
                  success: function(response)
                  {
                        $("#submit_without_page_refresh_status").html($(response).fadeIn(2000));
                        $("#fullname").val('');
                        $("#email").val('');
                        $("#comment").val('');
                  }
            });
      }
}
</script>


PHP Code:

<?php
if(isset($_POST["fullname"]) && isset($_POST["email"]) && isset($_POST["comment"]) && !empty($_POST["fullname"]) && !empty($_POST["email"]) && !empty($_POST["comment"]))
{
?>
<center>
<div style="width:600px; font-family: helvetica, arial, 'lucida grande', sans-serif; font-size:12px; color:black;" align="left">
<b>Your Fullname:</b> <?php echo strip_tags($_POST["fullname"]); ?><br><br>
<b>Email Address:</b> <?php echo strip_tags($_POST["email"]); ?><br><br>
<b>Your Comment:</b> <?php echo nl2br(strip_tags($_POST["comment"])); ?><br><br>

</div>
</center>
<?php

}
else
{
echo '<div class="notice">Sorry, some thing went wrong and your submission was unsuccessful. Please try again or contact the site admin to report this error should the problem persist. Thanks...</div>';
}
?>



That's it guys...



Comments
0

 

Announcement x
Dear Users and Clients,

This is to inform you that we have recently updated our website generally.

If you experience any problem viewing any part of this website or if you notice that any of our scripts or tutorials are not functioning properly as should be, please click on the Contact Link at the top of this page to report the issue to us.

Our priority is to give you the best of service!


Thank You,
The Vasplus Team

Announcement