Loading...
 
Gmail / Facebook Style Chat Application


Posted: Monday 1st of October 2012

Submit form without Refreshing Website 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...


Views Today: 2
Total Views: 1036

Comments
0
OUR OBJECTIVE

Our objective is to reach a place where our services will be highly regarded by businesses from various industrial domains for building their innovative busines solutions with our cutting-edge technological expertise, interactive designs and uncompromised quality.

OUR MISSION

We aspire to help businesses ranging from startups to enterprises, who reach out to us with their requirements, in achieving great lengths, expanding their reach, upscaling their products, and generate a large user-base with our outstanding and cost-effective services.

Copyright © 2011 - 2024 | All Rights Reserved