[Coding]Submit a Form or Page Without Refreshing Page

Background images in tutorial.css file may need to be referenced as ../images/filename for them to show when you



The phpmailer.php script in /bin does not need adjustment.

The process.php file in /bin does need adjustment to send an email correctly. At a minimum, you need to change the $to, $email, $fromaddress, and $mail->From to get it to work.


you have my permission to use any of the included images, if you would like. I did grab the cancel.png off a previous tutorial at nettuts.com so you might want to inquire with nettuts as to if you can use that one. check.png was included with a free icon set that I got from random sites.

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:Verdana, Geneva, 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:Verdana, Geneva, 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:Verdana, Geneva, 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:Verdana, Geneva, 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:Verdana, Geneva, 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:Verdana, Geneva, sans-serif; font-size:11px; 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:Verdana, Geneva, 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 :p