Share on:

article image to show article

Sign up form in PHP without refresh page JQUERY plugin

Jul 11 2016
Demo

In this article I will explain you how to process a html form with php without refresh the whole page. first of all create basic html form
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Sign Up example Amarjyt.com</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
    <body style="background-color: #eee;">
        <div class="container">
            <br>
            <div class="col-md-6 col-md-offset-3">
                <div class="panel panel-primary">
                    <div class="panel-heading w-bg text-center">
                        <div class="panel-title">SignUp Here</div>
                    </div>
                    <div class="panel-body">
                        <form method="post" action="index.php" id="signup-form">
                            <div class="form-group">
                                <label for="fname">Firstname</label>
                                <input type="text" class="form-control valid-length required" id="fname" name="firstname" placeholder="Firstname" required maxlength="20">
                            </div>
                            <div class="form-group">
                                <label for="lname">Lastname:</label>
                                <input type="text" class="form-control required" id="lname" name="lastname" placeholder="Lastname" required maxlength="20">
                            </div>
                            <div class="form-group">
                                <label for="email1">Email address:</label>
                                <input type="email" class="form-control required" id="email1" name="email" placeholder="Enter Email" required maxlength="50">
                            </div>
                            <div class="form-group">
                                <label for="pwd">Password:</label>
                                <input type="password" class="form-control required" id="pwd" name="password" placeholder="Enter Password" required  maxlength="128">
                            </div>
                            <button type="submit" class="btn btn-success">Sign Up</button><br>
                        </form>
                    </div>
                </div>
            </div><div class="clearfix"></div>
        </div>
    </body>
</html>
Now processs this htl form wqith php
if($_SERVER['REQUEST_METHOD'] =="POST"){
    die(msg(1,"You sign up successfully."));
}
To get response from server I create a php function
function msg($status, $txt) {
    return '{"status":' . $status . ',"txt":"' . $txt . '"}';
}
this function will get data response from server and send it to html page.

Jquery plugin to process this form without refresh page
 $(document).ready(function () {
                $("#signup-form").process();
            });
            (function ($) {
    $.fn.process = function () {
        var it = $(this);
        var act = it.attr('action');
        var button = it.find("button");
        it.submit(function (e) {
            $(button).prop('disabled', true);
             $('
Working..
').insertAfter(it); hideshow('loading', 1); myalert(0); $.ajax({ type: "POST", url: act, data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values) contentType: false, cache: false, // The content type used when sending data to the server. processData: false, dataType: "JSON", success: function (msg) { if (parseInt(msg.status) == 1) { $(".myalert").remove(); $('
').insertAfter(it); myalert(1, msg.txt); it.trigger("reset"); $(".myalert").show(); $(button).prop('disabled', false); } else if (parseInt(msg.status) == 2){ $(button).prop('disabled', false); window.location=msg.txt; }else if (parseInt(msg.status) == 0) { $(".myalert").remove(); $('
').insertAfter(it); myalert(1, msg.txt); $(".myalert").show(); $(button).prop('disabled', false); } hideshow('loading', 0); $(".loading").remove(); } }); e.preventDefault(); }); function hideshow(el, act) { if (act) $('.' + el).css('visibility', 'visible'); else $('.' + el).css('visibility', 'hidden'); } function myalert(act, txt) { hideshow('myalert', act); if (txt) $('.myalert').html('×'+txt); } }; }(jQuery));
Here is the full code

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Sign Up example Amarjyt.com</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script>
            $(document).ready(function () {
                $("#signup-form").process();
            });
            (function ($) {
    $.fn.process = function () {
        var it = $(this);
        var act = it.attr('action');
        var button = it.find("button");
        it.submit(function (e) {
            $(button).prop('disabled', true);
             $('<div class="loading"  visibility: hidden;">Working..</div>').insertAfter(it);
            hideshow('loading', 1);
             myalert(0);
            $.ajax({
                type: "POST",
                url: act,
                data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
                contentType: false,
                cache: false, // The content type used when sending data to the server.
                processData: false,
                dataType: "JSON",
                success: function (msg) {
                    if (parseInt(msg.status) == 1)
                    {
                        $(".myalert").remove();
                        $('<br><div class="alert alert-success myalert" style="visibility: hidden;"></div>').insertAfter(it);
                        myalert(1, msg.txt);
                        it.trigger("reset");
                        $(".myalert").show();
                        $(button).prop('disabled', false);
                    } else if (parseInt(msg.status) == 2){
                        $(button).prop('disabled', false);
                        window.location=msg.txt;
                    }else if (parseInt(msg.status) == 0)
                    {
                        $(".myalert").remove();
                        $('<br><div class="alert alert-danger myalert" style="visibility: hidden;"></div>').insertAfter(it);
                        myalert(1, msg.txt);
                        $(".myalert").show();
                        $(button).prop('disabled', false);
                    }
                    hideshow('loading', 0);
                    $(".loading").remove();    
                }
                
            });
            e.preventDefault();

        });
        function hideshow(el, act)
        {
            if (act)
                $('.' + el).css('visibility', 'visible');
            else
                $('.' + el).css('visibility', 'hidden');
        }

        function myalert(act, txt)
        {
            hideshow('myalert', act);
            if (txt)
                $('.myalert').html('<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>'+txt);

        }
    };
}(jQuery));
        </script>
    </head>
    <body style="background-color: #eee;">
        
        <div class="container">
            <br>
            <div class="col-md-6 col-md-offset-3">
                <div class="panel panel-primary">
                    <div class="panel-heading w-bg text-center">
                        <div class="panel-title">SignUp Here</div>
                    </div>
                    <div class="panel-body">
                        <form method="post" action="index.php" id="signup-form">
                            <div class="form-group">
                                <label for="fname">Firstname</label>
                                <input type="text" class="form-control valid-length required" id="fname" name="firstname" placeholder="Firstname" required maxlength="20">
                            </div>
                            <div class="form-group">
                                <label for="lname">Lastname:</label>
                                <input type="text" class="form-control required" id="lname" name="lastname" placeholder="Lastname" required maxlength="20">
                            </div>
                            <div class="form-group">
                                <label for="email1">Email address:</label>
                                <input type="email" class="form-control required" id="email1" name="email" placeholder="Enter Email" required maxlength="50">
                            </div>
                            <div class="form-group">
                                <label for="pwd">Password:</label>
                                <input type="password" class="form-control required" id="pwd" name="password" placeholder="Enter Password" required  maxlength="128">
                            </div>
                            <button type="submit" class="btn btn-success">Sign Up</button><br>
                        </form>
                    </div>
                </div>
            </div><div class="clearfix"></div>
        </div>
    </body>
</html>
Category: php  html  css  jquery  javascript