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

20,676FansLike
567FollowersFollow
2,367FollowersFollow
16,200SubscribersSubscribe

INSTAGRAM

Top List: 5 Legit Malaysia Dating Apps & Web Web Sites That Actually Work!

Top List: 5 Legit Malaysia Dating Apps & Web Web Sites That Actually Work! Internet dating hasn’t flourished in Malaysia the method it offers...

Being conscious of what goes on within the 5 durations of a connection

Being conscious of what goes on within the 5 durations of a connection The five phases of the relationship are very commonplace. There's absolutely no...

The Top Issue You Need To Ask For the camelizer

CamelFilter. Probably the price tracker, CamelFilter rocks to inform you of their lowest prices available for the particular services and products you are...