How to submit a PHP form using ajax ?

In this article, we will see the use of the AJAX request to submit a form . The form will be submitted by sending the POST request to the server where the data will be stored.

In this article, we gave an example registration form for collecting user information. After client-side validation, these form data will be sent to a PHP page through a jQuery AJAX call. After sending the registration email, the PHP page will respond to the AJAX request.

jQuery AJAX regestration Form

This form contains a collection of inputs to get user information. It triggers jQuery AJAX call on the click event of its submit button.

<div id="frmContact">
    <div id="mail-status"></div>
    <div>
        <label style="padding-top:20px;">Name</label><span id="userName-info" class="info"></span><br/>
        <input type="text" name="userName" id="userName" class="demoInputBox">
    </div>
    <div>
        <label>Email</label><span id="userEmail-info" class="info"></span><br/>
        <input type="text" name="userEmail" id="userEmail" class="demoInputBox">
    </div>
    <div>
        <label>Address</label><span id="address-info" class="info"></span><br/>
        <input type="text" name="address" id="address" class="demoInputBox">
    </div>
    <div>
        <label>Message</label><span id="message-info" class="info"></span><br/>
        <textarea name="message" id="message" class="demoInputBox" cols="60" rows="6"></textarea>
    </div>
    <div>
        <button name="submit" class="btnAction" onClick="sendContactDetails();">Send</button>
    </div>
</div>

This jQuery script validates registration form input and sends AJAX requests to a PHP page on successful validation. It collects registration form input and sends it to the second PHP page as the parameters.

function sendContactDetails() {
    var valid;	
    valid = validateContact();
    if(valid) {
        jQuery.ajax({
            url: "contact_mail.php",
            data:'userName='+$("#userName").val()+'&userEmail='+
            $("#userEmail").val()+'&address='+
            $("#address").val()+'&message='+
            $("#message").val(),
            type: "POST",
            success:function(data){
                $("#mail-status").html(data);
            },
            error:function (){}
        });
    }
}

The client-side validation script is,

function validateContact() {
    var valid = true;	
    $(".demoInputBox").css('background-color','');
    $(".info").html('');
    if(!$("#userName").val()) {
        $("#userName-info").html("(required)");
        $("#userName").css('background-color','#FFFFDF');
        valid = false;
    }
    if(!$("#userEmail").val()) {
        $("#userEmail-info").html("(required)");
        $("#userEmail").css('background-color','#FFFFDF');
        valid = false;
    }
    if(!$("#userEmail").val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)) {
        $("#userEmail-info").html("(invalid)");
        $("#userEmail").css('background-color','#FFFFDF');
        valid = false;
    }
    if(!$("#address").val()) {
        $("#address-info").html("(required)");
        $("#address").css('background-color','#FFFFDF');
        valid = false;
    }
    if(!$("#message").val()) {
        $("#message-info").html("(required)");
        $("#message").css('background-color','#FFFFDF');
        valid = false;
    }
    return valid;
}

PHP Code for Sending Contact Mail

<?php
    $toEmail = "admin@quickmysupport.com";
    $mailHeaders = "From: " . $_POST["userName"] . "<". $_POST["userEmail"] .">\r\n";
    $subject = 'Registration-quickMySupport';
    if(mail($toEmail, $subject, $_POST["message"], $mailHeaders)) {
        print "<p class='success'>Mail Sent.</p>";
    } else {
        print "<p class='Error'>Problem in Sending Mail.</p>";
    }

Good luck and I hope this article can be useful. See you in the next article…

If you enjoyed this tutorial and learned something from it, please consider sharing it with our friends and followers! Also like to my facebook page to get more awesome tutorial each week!