Do not “Leave this page” when submitting on contact form
Question
I've only seen one other question that's similar ( this one ) and I don't know how to apply it to my page. I'm new to web development and so I used this template for a contact form. You can view my contact page here: http://mikeyaworski.com/contact_files/
The problem is that the page reloads (I think) when you submit your message. I am using the window.onbeforeunload function to alert the user when they are leaving the page. But when they press submit, the alert comes up because they are "leaving the page" apparently. That's not what I want. I want for the page to not reload and so the alert should not pop up.
Sidenote: after you submit, the fields change size. Does anyone know why?
This isn't my code, so I'm not sure what is making the page reload and how to fix it.
Here is the index page (what I consider relevant parts):
<?PHP
require_once("./include/fgcontactform.php");
$formproc = new FGContactForm();
$formproc->AddRecipient('mail@mikeyaworski.com'); //<<---Put your email address here
$formproc->SetFormRandomKey('CnRrspl1FyEylUj');
if(isset($_POST['submitted'])) {
if($formproc->ProcessForm()) {
echo "<script type='text/javascript'>alert('Sent!');</script>";
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<title>Contact - mikeyaworski</title>
<link rel="STYLESHEET" type="text/css" href="contact.css" />
<script type='text/javascript' src='scripts/gen_validatorv31.js'></script>
<style type="text/css">
label {
color: white;
}
textarea {
max-width: 400px;
max-height: 200px;
}
input#name, input#email, input#subject {
height: 18px;
width: 220px;
}
</style>
</head>
<body style="background-color:#101010;">
<script type="text/javascript">
window.onbeforeunload = function() {
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
var subject = document.getElementById('subject').value;
var message = document.getElementById('message').value;
if (name == "" && email == "" && subject == "" && message == "") { // do nothing (all blank fields)
}
else {
return 'Your changes will not be saved.'; // stop them, they have unsaved content
}
};
</script>
<!-- Form Code Start -->
<form id='contactus' action='<?php echo $formproc->GetSelfScript(); ?>' method='post' accept-charset='UTF-8'>
<fieldset>
<legend style="color:white;">Contact</legend>
<input type='hidden' name='submitted' id='submitted' value='1'/>
<input type='hidden' name='<?php echo $formproc->GetFormIDInputName(); ?>' value='<?php echo $formproc->GetFormIDInputValue(); ?>'/>
<input type='text' class='spmhidip' name='<?php echo $formproc->GetSpamTrapInputName(); ?>' />
<div><span class='error'><?php echo $formproc->GetErrorMessage(); ?></span></div>
<div class='container'>
<label for='name' >Your Name: </label><br/>
<input type='text' name='name' id='name' maxlength="50" /><br/> <!-- value='<?php //echo $formproc->SafeDisplay('name') ?>' -->
<span id='contactus_name_errorloc' class='error'></span>
</div>
<div class='container'>
<label for='email' >Email Address:</label><br/>
<input type='text' name='email' id='email' maxlength="50" /><br/> <!-- value='<?php //echo $formproc->SafeDisplay('email') ?>' -->
<span id='contactus_email_errorloc' class='error'></span>
</div>
<div class='container'>
<label for='subject' >Subject:</label><br/>
<input type='text' name='subject' id='subject' maxlength="50" /><br/><!-- value='<?php //echo $formproc->SafeDisplay('subject') ?>' -->
<span id='contactus_subject_errorloc' class='error'></span>
</div>
<div class='container'>
<label for='message' >Message:</label><br/>
<textarea rows="10" cols="50" name='message' id='message'></textarea> <!-- <?php //echo $formproc->SafeDisplay('message') ?> -->
<span id='contactus_message_errorloc' class='error'></span>
</div>
<div class='container'>
<input type='submit' name='Submit' value='Submit' />
</div>
</fieldset>
</form>
<!-- client-side Form Validations:
Uses the excellent form validation script from JavaScript-coder.com-->
<script type='text/javascript'>
// <![CDATA[
var frmvalidator = new Validator("contactus");
frmvalidator.EnableOnPageErrorDisplay();
frmvalidator.EnableMsgsTogether();
frmvalidator.addValidation("name","req","Please provide your name.");
frmvalidator.addValidation("email","req","Please provide your email address.");
frmvalidator.addValidation("email","email","Please provide a valid email address.");
frmvalidator.addValidation("subject","req","Please provide the subject.");
frmvalidator.addValidation("message","req","Please provide your message.");
frmvalidator.addValidation("message","maxlen=2048","The message is too long (more than 2KB).");
// ]]>
</script>
</body>
</html>
I assume it has something to do with $formproc = new FGContactForm(); . So if you need to see functions from the file fgcontactform.php then just let me know.
2 answers
solution1
1 ACCPTED 2014-04-30 00:04:37
UPDATED
<input type="submit" name="Submit" value="Submit" onclick="window.onbeforeunload = null;">
If you click on submit you set the handler window.onbeforeunload to null .
solution2
0 2014-04-29 23:37:39
All forms reload a page. If you wan't to POST data without having a reload (which is not suggested due to security) you have to look into AJAX.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.