Home / Programming / PHP Programming / Submit a form in PHP without refreshing the page using AJAX
Submit a form in PHP without refreshing the page using AJAX

Submit a form in PHP without refreshing the page using AJAX

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

Comments

comments

About Sumit Bijvani

Check Also

PHP GET and POST methods

PHP GET and POST methods

There are two ways the client (web browser) can send HTTP request to the web ...

Leave a Reply

Your email address will not be published.