Submit a form in PHP without refreshing the page using AJAX

Post date:

Author:

Category:

The following is a very simple trick to create form in PHP which can be submitted without refreshing whole page. The form will be automatically submitted to web server and further process on that form can be done as per requirements.

First, Add jQuery library file in to your code, by invoking following code.
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script>

HTML Form

<form method="post" name="form">
    Name: <input id="name" name="name" type="text" /><br />
    Email: <input id="email" name="email" type="email" required />

    <span class="error" style="display:none; color:#FF0000"> Please enter valid data</span> <span class="success" style="display:none;color:#33CC66"> Thank You!! Form has been sent successfully.</span>

    <p><input type="submit" name="submit" value="Submit" class="submit"/></p>
</form>

 

jQuery Code

<script type="text/javascript" >
    $(function() {
        $(".submit").click(function() {
            var name = $("#name").val();
            var email = $("#email").val();
            var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

            var dataString = 'name=' + name + '&email=' + email;

            if (name == '') {
                $('.success').fadeOut(200).hide();
                $('.error').fadeOut(200).show().html('<div class="notice" align="left">Please enter a name</div>');

                $("#name").focus();
            }
            else if (email == '') {
                $('.success').fadeOut(200).hide();
                $('.error').fadeOut(200).show().html('<div class="notice" align="left">Please enter a email address</div>');
                $("#email").focus();
            }
            else if (reg.test(email) == false) {
                $('.success').fadeOut(200).hide();
                $('.error').fadeOut(200).show().html('<div class="notice" align="left">Please enter a valid email address</div>');
                $("#email").focus();
            }
            else {
                $.ajax({
                    type: "POST",
                    url: "mail.php",
                    data: dataString,
                    success: function() {
                        $('.success').fadeIn(200).show();
                        $('.error').fadeOut(200).hide();
                    }
                });
            }
        return false;
    });
});
</script>

Live Demo   Download Script

STAY CONNECTED

15,753FansLike
567FollowersFollow
1,554FollowersFollow
12,297SubscribersSubscribe

INSTAGRAM

Shortcuts to Best Scholarship Essay Samples Only the Experts Know

Shortcuts to Best Scholarship Essay Samples Only the Experts Know The Honest to Goodness Truth on Best Scholarship Essay Samples Both...

Help Me Write My College Essay

Written exactly to specification, would advocate this writer to anybody.If you find oneself perpetually bothered about your assignment with the believed, “Can any...

Key Pieces of Good Essay Writing Service

Key Pieces of Good Essay Writing Service The 30-Second Trick for Good Essay Writing Service When you get essay from us,...