Submit form without Refreshing Page 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"> </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 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...
