Question

我有一个基本的PHP联系表单并且有process.php文件来检查表单的内容。我的表单工作正常，但我想用returnstatus填充$errors div的内容而不完全刷新页面。我确信这是一项简单的任务，但我不确定如何去做。这是我的代码：

联系表单

<?php session_start(); ?>

<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles2.css" />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>
    <body>

        <div id="contact-form" class="clearfix">
            <h1>Get In Touch!</h1>
            <img id="stamp" src="images/stamp.png" height="128" width="128" alt="Stamp"/>
            <h2>
                Please provide as much information as possible for me to help you with your enquiry
            </h2>
            <div id="returnstatus">

            </div>  
            <form method="post" action="process2.php">
                <label for="name">Name: <span class="required">*</span></label>  
                <input type="text" id="name" name="name" placeholder="Joe Bloggs" required="required" /> 

                <label for="email">Email Address: <span class="required">*</span></label>  
                <input type="email" id="email" name="email" placeholder="joebloggs@example.com" required="required" /> 

                <label for="message">Message: <span class="required">*</span></label>  
                <textarea id="message" name="message" placeholder="Your message must be greater than 20 characters" required="required" data-minlength="20"></textarea>  

                <input type="text" name="check" class="check" />
                <span id="loading"></span>  
                <input type="submit" value="Send!" id="submit-button" />  
                <p id="req-field-desc"><span class="required">*</span> indicates a required field</p> 
            </form>
        </div>

    </body>
<html>

process2.php

<?php   

$name       = check_input($_POST['name']);
$email      = check_input($_POST['email']);
$message    = check_input($_POST['message']);

$errors = "";
if (empty($name)){
    $errors .= "Please fill out the first name field <br/> ";
}
if (empty($email)){
    $errors .= "Please fill out the email field <br/> ";
} else {
    $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
    if(!preg_match($email_exp,$email)) {
        $errors .= 'The email address you entered does not appear to be valid<br />';
    }
}
if (strlen($message) < 21){
    $errors .= "Your message must be at least 20 characters";
}

if ($errors != "") {
    echo "<b>Message not sent</b><br/>";
    echo $errors;
} else {
    $errors = "<p>Thank you, $name, for your message.</p><p>I'll get back to you as soon as possible!</p>";
    echo $errors;
//send email if all is ok 
if ($_POST['check'] == '') {        //check to see if the hidden input entry is empty
    $headers = "From: {$email}" . "\r\n";  
    $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";  

    $emailbody = "<p>You have recieved a new message from the enquiries form on your website.</p> 
                                <p><strong>Name: </strong> {$name} </p> 
                                <p><strong>Email Address: </strong> {$email} </p> 
                                <p><strong>Message: </strong> {$message} </p>";
    mail("xxxxx@gmail.com","New Enquiry",$emailbody,$headers);  
    }
}  

function check_input($data)
{
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    return $data;
}

?>

Answer 1

显而易见的答案是发送一个AJAX请求。请访问jQuery.post()或Request.HTML in MooTools了解详情。以下handleSuccess方法会将process2.php的HTML输出注入returnstatus。

mootools 1.4.5示例

(function(){
    var form = $$('#contact-form form')[0];
    var returnStatus = $('returnstatus');
    var handleSuccess = function(responseTree, responseElements, responseHTML, responseJavaScript) {
        returnStatus.set('html', responseHTML);
    };
    form.addEvent('submit', function() {
        new Request.HTML({
            url: form.get('action'), 
            onSuccess: handleSuccess
        }).post(form);
        return false;
    });
})();

jquery 1.7.2示例

(function(){
    var form = $('#contact-form form');
    var returnStatus = $('#returnstatus');
    var handleSuccess = function(data) {
        returnStatus.html(data);
    };
    form.submit(function() {
        $.post(form.attr('action'), form.serialize(), handleSuccess, 'html');
        return false;
    });
})();

Answer 2

你需要发送AJAX请求，使用jQuery库你可以序列化表单数据并将$ .post发送到process2.php

动态返回PHP联系表单的值

2 个答案: