-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathregistration.html
156 lines (149 loc) · 8.19 KB
/
registration.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/daisyui@2.15.0/dist/full.css" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body class="bg-gray-100">
<div class="navbar bg-base-200 shadow-lg">
<div class="flex-1">
<h1 class="text-2xl font-bold px-4 text-4xl font-bold text-center text-blue-500">School Website</h1>
</div>
<div class="flex-none gap-2">
<a href="login.php" class="btn btn-primary">Login</a>
</div>
</div>
<!-- Success Alert (hidden by default) -->
<div id="successAlert" class="alert alert-success shadow-lg fixed top-4 left-1/2 transform -translate-x-1/2 w-auto opacity-0 invisible z-50">
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span id="successMessage"></span>
</div>
</div>
<!-- Error Alert (hidden by default) -->
<div id="errorAlert" class="alert alert-error shadow-lg fixed top-4 left-1/2 transform -translate-x-1/2 w-auto opacity-0 invisible z-50">
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
<span id="errorMessage"></span>
</div>
</div>
<div class="flex items-center justify-center min-h-screen">
<div class="flex items-center justify-center min-h-screen">
<div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-md">
<h2 class="text-2xl font-bold mb-6 text-center">Registration Form</h2>
<form id="registrationForm" action="user.php" method="POST">
<div class="mb-4">
<label class="block text-gray-700">Service Number</label>
<input type="text" name="service_number" class="input input-bordered w-full" required>
</div>
<div class="mb-4">
<label class="block text-gray-700">Rank</label>
<input type="text" name="rank" class="input input-bordered w-full" required>
</div>
<div class="mb-4">
<label class="block text-gray-700">Name</label>
<input type="text" name="name" class="input input-bordered w-full" required>
</div>
<div class="mb-4">
<label class="block text-gray-700">Email</label>
<input type="email" name="email" class="input input-bordered w-full" required>
</div>
<div class="mb-4">
<label class="block text-gray-700">Phone Number</label>
<input type="tel" name="phone_number" class="input input-bordered w-full" required>
</div>
<div class="mb-4">
<label class="block text-gray-700">Password</label>
<input type="password" name="password" class="input input-bordered w-full" required>
</div>
<div class="mb-4">
<label class="block text-gray-700">Confirm Password</label>
<input type="password" name="confirm_password" class="input input-bordered w-full" required>
</div>
<div class="mb-6">
<button type="submit" class="btn btn-primary w-full">Register</button>
</div>
</form>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#registrationForm').on('submit', function(e) {
e.preventDefault();
const phoneNumber = $('input[name="phone_number"]').val();
const password = $('input[name="password"]').val();
const serviceNumber = $('input[name="service_number"]').val();
const rank = $('input[name="rank"]').val();
const name = $('input[name="name"]').val();
const email = $('input[name="email"]').val();
const confirmPassword = $('input[name="confirm_password"]').val();
// Show loading state
const submitButton = $(this).find('button[type="submit"]');
submitButton.addClass('loading').prop('disabled', true);
$('#errorAlert').addClass('opacity-0 invisible').removeClass('opacity-100 visible');
$('#successAlert').addClass('opacity-0 invisible').removeClass('opacity-100 visible');
console.log(serviceNumber, phoneNumber, password, confirmPassword, rank, name, email);
$.ajax({
url: 'user.php',
type: 'POST',
data: {
service_number: serviceNumber,
rank: rank,
name: name,
email: email,
phone_number: phoneNumber,
password: password,
confirm_password: confirmPassword
},
dataType: 'json',
success: function(response) {
if (response.success) {
// Show success message
$('#successMessage').text('Registration successful for user ' + name);
$('#successAlert').removeClass('opacity-0 invisible').addClass('opacity-100 visible');
setTimeout(function() {
$('#successAlert').addClass('opacity-0 invisible').removeClass('opacity-100 visible');
window.location.href = 'login.php';
}, 2000);
submitButton.removeClass('loading').prop('disabled', false);
} else {
// Show error message
$('#errorMessage').text(response.message || 'Registration failed. Please try again.');
$('#errorAlert').removeClass('opacity-0 invisible').addClass('opacity-100 visible');
setTimeout(function() {
$('#errorAlert').addClass('opacity-0 invisible').removeClass('opacity-100 visible');
}, 3000);
submitButton.removeClass('loading').prop('disabled', false);
}
},
error: function(xhr, status, error) {
$('#errorMessage').text('An error occurred: ' + error);
$('#errorAlert').removeClass('opacity-0 invisible').addClass('opacity-100 visible');
setTimeout(function() {
$('#errorAlert').addClass('opacity-0 invisible').removeClass('opacity-100 visible');
}, 3000);
submitButton.removeClass('loading').prop('disabled', false);
// console.log(data);
console.log(xhr);
}
});
});
});
</script>
<footer class="bg-gray-800 text-white py-4 mt-8">
<div class="container mx-auto text-center">
<p>© 2024 School System. All rights reserved.</p>
</div>
</footer>
</body>
</html>