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

时间:2014-04-29 23:27:44

标签: javascript php html

我之前只看到过另外一个类似的问题(this one)而且我不知道如何将它应用到我的页面。我是网络开发的新手,因此我使用this template作为联系表单。您可以在此处查看我的联系页面:http://mikeyaworski.com/contact_files/

问题是当您提交邮件时页面会重新加载(我认为)。我正在使用window.onbeforeunload功能在用户离开页面时提醒用户。但是当他们按下提交时,警报就会出现,因为他们是#34;离开页面"显然。那不是我想要的。我希望页面不重新加载,因此不应弹出警报。

旁注:提交后,字段会更改大小。有谁知道为什么?

这不是我的代码,因此我不确定是什么让网页重新加载以及如何修复它。

这是索引页面(我认为相关部分):

<?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>

我认为它与$formproc = new FGContactForm();有关。因此,如果您需要查看文件fgcontactform.php中的函数,请告诉我。

2 个答案:

答案 0 :(得分:1)

<强>已更新

<input type="submit" name="Submit" value="Submit" onclick="window.onbeforeunload = null;">

如果您点击提交,则将处理程序window.onbeforeunload设置为null

答案 1 :(得分:0)

所有表单都会重新加载页面。如果你想在没有重新加载的情况下发布数据(由于安全性而没有建议),你必须研究AJAX。

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