ajax_login_registration/index.html at main · moon21bd/ajax_login_registration · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html lang="en">

<title>Login and Registration with AJAX and PHP</title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<head>

    <script src="public/js/jquery-3.5.1.min.js"></script>
    <!---- jquery link local dont forget to place this in first than other script or link or may not work ---->

    <link rel="stylesheet" href="public/css/bootstrap.min.css">
    <!---- boostrap.min link local ----->

    <link rel="stylesheet" href="public/css/style.css">
    <!---- custom stylesheet link local ----->

    <script src="public/js/bootstrap.min.js"></script>
    <!---- Boostrap js link local ----->

    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
    <!---- Font awesom link local ----->

</head>
<body>
<div class="container-fluid">
    <div class="container">
        <h1 class="text-center" id="title">TechnoGenius</h1>
        <h2 class="text-center" id="title">Login & Registration with AJAX and PHP</h2>
        <p class="text-center">
            <small id="passwordHelpInline" class="text-muted"> Developer : <a
                    href="https://facebook.com/frdsmn">Raqibul Hasan</a>
            </small>
        </p>
        <hr>
        <div class="row">
            <div class="col-md-5">
                <form id="registration_form" role="form">
                    <fieldset>
                        <p class="text-uppercase pull-center"> SIGN UP / REGISTRATION</p>
                        <div class="form-group">
                            <input type="text" name="username" id="username" class="form-control input-lg"
                                   placeholder="Enter your username.">
                        </div>

                        <div class="form-group">
                            <input type="email" name="email" id="email" class="form-control input-lg"
                                   placeholder="Enter your email.">
                        </div>
                        <div class="form-group">
                            <input type="password" name="password" id="password" class="form-control input-lg"
                                   placeholder="Enter your password.">
                        </div>
                        <div class="form-check">
                            <label class="form-check-label">
                                <input type="checkbox" class="form-check-input">
                                By Clicking register you're agree to our policy & terms
                            </label>
                        </div>
                        <div>
                            <input type="button" id="register_btn" class="btn btn-lg btn-primary" value="Register">
                        </div>
                    </fieldset>
                </form>
            </div>

            <div class="col-md-2">
                <!-------null------>
            </div>

            <div class="col-md-5">
                <form id="login_form" role="form">
                    <fieldset>
                        <p class="text-uppercase"> Login using your account: </p>

                        <div class="form-group">
                            <input type="text" name="username" id="login_username" class="form-control input-lg"
                                   placeholder="Enter username or email">
                        </div>
                        <div class="form-group">
                            <input type="password" name="password" id="login_password" class="form-control input-lg"
                                   placeholder="Enter password">
                        </div>
                        <div>
                            <input type="button" id="login_btn" class="btn btn-md" value="Sign In">
                        </div>

                    </fieldset>
                </form>
            </div>
        </div>
    </div>
    <p class="text-center">
        <small id="passwordHelpInline" class="text-muted"> Developed by : <a href="https://facebook.com/TechnoGeniuss">
            Team TechnoGenius</a></small>
    </p>
</div>

<script type="application/javascript">

    window.addEventListener('DOMContentLoaded', (event) => {
        console.log('DOM fully loaded and parsed');

        $("#login_btn").on("click", function (event) {
            event.preventDefault();
            let login_user = $('#login_username').val();
            let login_password = $('#login_password').val();

            console.log('login_user ', login_user);
            console.log('login_password ', login_password);

            console.log('login button clicked');
            $.ajax({
                url: "webservice/ajax_login.php",
                data: {
                    username: login_user,
                    password: login_password,
                },
                method: "POST",
                dataType: "json",
                success: function (response) {
                    if (response.status == 1) {
                        location.replace('dashboard.php');
                        return false;
                    } else {
                        alert(response.msg);
                        $('#login_form').trigger("reset");
                    }
                }
            });
        });

        // registration btn action start
        $("#register_btn").on("click", function (event) {
            event.preventDefault();

            let username = $("#username").val();
            let email = $("#email").val();
            let password = $("#password").val();

            console.log('username ', username);
            console.log('email ', email);
            console.log('password ', password);

            $.ajax({
                url: "webservice/ajax_registration.php",
                data: {
                    username: username,
                    email: email,
                    password: password,
                },
                method: "POST",
                dataType: "json",
                success: function (response) {
                    if (response.status == 1) { // success msg goes here.
                        alert(response.msg);
                        location.reload();
                    } else { // error msg goes here.
                        alert(response.msg);
                        location.reload();
                    }
                }
            });
        });

    });

</script>

</body>
</html>