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

18,473FansLike
567FollowersFollow
1,929FollowersFollow
14,600SubscribersSubscribe

INSTAGRAM

Exactly about Australian Immigration Laws on Mail Order Brides

Exactly about Australian Immigration Laws on Mail Order Brides Global enjoy Scout has received an importance market in Australia considering that the web web site...

Your Basic principles of  gambling establishment mmorpgs This One Might Use Gain With Running Today

Your Basic principles of  gambling establishment mmorpgs This One Might Use Gain With Running Today Like with one other casino wars inside the show,...

Hot Russian Girls The Bigger Chehalis Dishes Bank

Hot Russian Girls The Bigger Chehalis Dishes Bank Welcome to one of several courting web site that is best for fulfilling stunning Slavic girls! I’ll...