防止联系人表单在提交后消失


Prevent contact form from disappearing after submitting

我有以下PHP代码:

<?php
$subjectPrefix = '[Contact via Site]';
$emailTo = 'blabla@domain.com';
if($_SERVER['REQUEST_METHOD'] == 'POST') {
    $name    = stripslashes(trim($_POST['form-name']));
    $email   = stripslashes(trim($_POST['form-email']));
    $phone   = stripslashes(trim($_POST['form-tel']));
    $subject = stripslashes(trim($_POST['form-assunto']));
    $message = stripslashes(trim($_POST['form-mensagem']));
    $pattern = '/['r'n]|Content-Type:|Bcc:|Cc:/i';
    if (preg_match($pattern, $name) || preg_match($pattern, $email) || preg_match($pattern, $subject)) {
        die("Header injection detected");
    }
    $emailIsValid = filter_var($email, FILTER_VALIDATE_EMAIL);
    if($name && $email && $emailIsValid && $subject && $message){
        $subject = "$subjectPrefix $subject";
        $body = "Nume: $name <br /> Email: $email <br /> Telefon: $phone <br /> Mesaj: $message";
        $headers .= sprintf( 'Return-Path: %s%s', $email, PHP_EOL );
        $headers .= sprintf( 'From: %s%s', $email, PHP_EOL );
        $headers .= sprintf( 'Reply-To: %s%s', $email, PHP_EOL );
        $headers .= sprintf( 'Message-ID: <%s@%s>%s', md5( uniqid( rand( ), true ) ), $_SERVER[ 'HTTP_HOST' ], PHP_EOL );
        $headers .= sprintf( 'X-Priority: %d%s', 3, PHP_EOL );
        $headers .= sprintf( 'X-Mailer: PHP/%s%s', phpversion( ), PHP_EOL );
        $headers .= sprintf( 'Disposition-Notification-To: %s%s', $email, PHP_EOL );
        $headers .= sprintf( 'MIME-Version: 1.0%s', PHP_EOL );
        $headers .= sprintf( 'Content-Transfer-Encoding: 8bit%s', PHP_EOL );
        $headers .= sprintf( 'Content-Type: text/html; charset="utf-8"%s', PHP_EOL );
        mail($emailTo, "=?utf-8?B?".base64_encode($subject)."?=", $body, $headers);
        $emailSent = true;
    } else {
        $hasError = true;
    }
} 
?> 

联系方式:

      <?php if(!empty($emailSent)): ?>
    <div class="col-md-6 col-md-offset-3">
        <div class="alert alert-success text-center">Mesajul dumneavoastra a fost trimis cu succes!</div>
    </div>
<?php else: ?>
    <?php if(!empty($hasError)): ?>
    <div class="col-md-5 col-md-offset-4">
        <div class="alert alert-danger text-center">A apărut o eroare la trimiterea, vă rugăm să încercați din nou mai târziu.</div>
    </div>
    <?php endif; ?>
<div class="form" >
    <form action="<?php echo $_SERVER['REQUEST_URI']; ?>" id="contact-form" role="form" method="post">
        <div>
            <div >
                <input type="text"  id="form-name" name="form-name" placeholder="NUME" required>
            </div>
        </div>
        <div>
            <div>
                <input type="email"  id="form-email" name="form-email" placeholder="EMAIL" required>
            </div>
        </div>
        <div >
            <div>
                <input type="tel"  id="form-tel" name="form-tel" placeholder="TELEFON">
            </div>
        </div>
        <div>
            <div>
                <input type="text"  id="form-assunto" name="form-assunto" placeholder="SUBIECT" required>
            </div>
        </div>
        <div>
            <div >
                <textarea  id="form-mensagem" name="form-mensagem" placeholder="MESAJ" required></textarea>
            </div>
        </div>
        <div>
            <div>
                <button type="submit" class="button">Trimite</button>
            </div>
        </div>
    </form>
</div>
<?php endif; ?> 

和这个用于验证的contact-form.js

(function ($, window, document, undefined) {
    'use strict';
    function hasFormValidation () {
        return (typeof document.createElement('input').checkValidity === 'function');
    };
    function addError (el) {
        return el.parent().addClass('has-error');
    };
    if (!hasFormValidation()) {
        $('#contact-form').submit(function () {
            var hasError = false,
                name     = $('#form-name'),
                mail     = $('#form-email'),
                subject  = $('#form-assunto'),
                message = $('#form-mensagem'),
                testmail = /^[^0-9][A-z0-9._%+-]+([.][A-z0-9_]+)*[@][A-z0-9_-]+([.][A-z0-9_]+)*[.][A-z]{2,4}$/,
                $this    = $(this);
            $this.find('div').removeClass('has-error');
            if (name.val() === '') {
                hasError = true;
                addError(name);
            }
            if (!testmail.test(mail.val())) {
                hasError = true;
                addError(mail);
            }
            if (subject.val() === '') {
                hasError = true;
                addError(subject);
            }
            if (message.val() === '') {
                hasError = true;
                addError(message);
            }
            if (hasError === false) {
                return true;
            }
            return false;
        });
    }
}(jQuery, window, document)); 

用户提交了联系表格后,它就消失了,我真的不明白为什么会发生这种情况,我怎么才能摆脱这一部分。有人能指出提交后隐藏它的部分吗?

既然您已经在使用contact-form.js,为什么不使用AJAX提交表单呢?

表单正在消失,因为您正在将表单提交到新页面并重定向。使用AJAX,您可以对整个提交过程进行更多的控制。

您要做的是删除将其发送到服务器的表单操作

<form id="contact-form" role="form" method="post">

action属性中的$_SERVER['REQUEST_URI']将是/?whatever is in the querystring,可能什么都不是,除非您从锚标记的href属性运行此表单。

而不是脚本/页面名称

这将把脚本名称放入您运行的页面的action属性中,以显示输入页面

<form action="<?php echo $_SERVER["PHP_SELF"]; ?>" id="contact-form" role="form" method="post">

或者,您可以将action属性完全从<form>标签中删除,这将默认为再次运行此表单

<form id="contact-form" role="form" method="post">