Home/ Questions/Q 8007085
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T17:42:56+00:00

I’ve got a basic PHP contact form and have it process.php file that checks

  • 0

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="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;
}

?>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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