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,004FansLike
567FollowersFollow
1,452FollowersFollow
10,898SubscribersSubscribe

INSTAGRAM

Payday Loans Payday Loans near Me Fundamentals Explained

Payday Loans Payday Loans near Me Fundamentals Explained Because of this it turns into the very proper alternative for borrowers of...

The Insider Secrets for Hello World

The Insider Secrets for Hello World You will carry on to let it operate since you stop by this next report. Nothing...

Cbd Topical Uk for Dummies

Cbd Topical Uk for Dummies Ruthless Cbd Topical Uk Strategies Exploited It is essential to not forget that the usage of...