CODEWITHSUNDEEP
javascriptphphtml
Michael Yaworski
Michael Yaworski

Reputation: 13483

Do not "Leave this page" when submitting on contact form

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('[email protected]'); //<<---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.

Upvotes: 1

Views: 2030

Answers (2)

Black Sheep
Black Sheep

Reputation: 6694

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.

Upvotes: 1

user2752985
user2752985

Reputation:

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.

http://www.w3schools.com/php/php_ajax_php.asp

Upvotes: 0

Related Questions