在联系表单上提交时，请勿“离开此页面”

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. 我是Web开发的新手，因此我将此模板用于联系表格。 You can view my contact page here: http://mikeyaworski.com/contact_files/ 您可以在这里查看我的联系页面： 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. 我正在使用window.onbeforeunload函数提醒用户离开页面时。 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(); 我认为这与$formproc = new FGContactForm(); . 。 So if you need to see functions from the file fgcontactform.php then just let me know. 因此，如果您需要从文件fgcontactform.php查看功能，请告诉我。

Answer 1

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 . 如果单击提交，则将处理程序window.onbeforeunload设置为null 。

Answer 2

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. 如果您不重新加载就不想发布数据（出于安全考虑，不建议这样做），则必须考虑AJAX。

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

在联系表单上提交时，请勿“离开此页面”

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-04-30 00:04:37

解决方案2
0 2014-04-29 23:37:39

在联系表单上提交时，请勿“离开此页面”

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-04-30 00:04:37

解决方案2 0 2014-04-29 23:37:39

解决方案1
1 已采纳 2014-04-30 00:04:37

解决方案2
0 2014-04-29 23:37:39