Dynamically return values for PHP contact form

Question

I've got a basic PHP contact form and have it process.php file that checks the content of the form. I have the form working correctly but i want to populate the contents of my returnstatus div with $errors without fully refreshing the page. I'm sure this is a simple task but i'm not sure how to go about it. Here is my code:

Contact Form

<?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="[email protected]" 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("[email protected]","New Enquiry",$emailbody,$headers);  
    }
}  

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

?>

"without fully refreshing the page" - Do you mean you want the entire operation to happen as an AJAX call? Or that you want some behavior to happen client-side (checking for errors) and then refresh the whole page when the form is "correct"? — David
– David, Commented May 27, 2012 at 13:59
Yes, i had a feeling i'd have to use Ajax, but i don't know how to pass the value from the php file to the contact form page. — garethdn
– garethdn, Commented May 27, 2012 at 14:21

creemama · Accepted Answer · 2012-05-27 15:26:58Z

The obvious answer is to send an AJAX request. Learn more at jQuery.post() or Request.HTML in MooTools. The handleSuccess methods below inject the HTML output from process2.php into returnstatus.

mootools 1.4.5 Example

(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 Example

(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;
    });
})();

Gntem · Accepted Answer · 2012-05-27 14:04:29Z

0

You need to send AJAX request, using jQuery library you can Serialize the form data and send a $.post to the process2.php

answered May 27, 2012 at 14:04

Gntem

7,2052 gold badges37 silver badges48 bronze badges

Collectives™ on Stack Overflow

Dynamically return values for PHP contact form

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related