-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathDonorForm.html
165 lines (148 loc) · 7.19 KB
/
DonorForm.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
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="DonorForm.css">
<title>Donor Form - BloodServe</title>
</head>
<body>
<!--Header & Nav Bar-->
<header class="header">
<h1>Blood-Serve</h1>
<ul class="nav-links">
<li><a href="MainPage.html">Home</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="About-Us.html">About Us</a></li>
<li><a href="Blogs.html">Blogs</a></li>
<li><a id="logout-link" class="dropdown-item" href="http://127.0.0.1:5500/login.html">Log-out</a></li>
</ul>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a id="logout-link" class="dropdown-item" href="#">Log-out</a></li>
</ul>
</header>
<!-- Welcome User -->
<div class="welcome-container text-center mt-5 pt-5">
<h2>Welcome User</h2>
</div>
<!-- Main Content -->
<div class="main-content">
<div class="centered-content">
<h1>Donor Information</h1>
<form id="donorForm" action="/donor" method="post" onsubmit="validateForm(event)">
<div class="mb-3">
<input type="text" class="form-control" name="Name" placeholder="Name">
</div>
<div class="mb-3">
<input type="number" class="form-control" name="Age" placeholder="Age">
</div>
<div class="mb-3">
<input type="text" class="form-control" name="Gender" placeholder="Gender('M' For Male / 'F' For Female)">
</div>
<div class="mb-3">
<select class="form-select" name="Blood_Type">
<option selected disabled>Blood Type</option>
<option value="A+">A+</option>
<option value="A-">A-</option>
<option value="B+">B+</option>
<option value="B-">B-</option>
<option value="AB+">AB+</option>
<option value="AB-">AB-</option>
<option value="O+">O+</option>
<option value="O-">O-</option>
</select>
</div>
<div class="mb-3">
<select class="form-select" name="donation_span">
<option selected disabled>Last Donated</option>
<option value="1">1 month ago</option>
<option value="2">2 months ago</option>
<option value="3">3 months ago</option>
<option value="4">4 months ago</option>
<option value="5">5 months ago</option>
<option value="6">6 months ago</option>
<option value="7">7 months ago</option>
<option value="8">8 months ago</option>
</select>
</div>
<div class="mb-3">
<input type="text" class="form-control" name="Contact_Info" placeholder="Contact Info">
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
<div id="successMessage" class="d-none mt-3 alert alert-success" role="alert">
Donor data submitted successfully
</div>
<div id="errorMessage" class="d-none mt-3 alert alert-danger" role="alert">
You cannot donate before 3 months.
</div>
</div>
</div>
<!--Footer-->
<footer class="footer mt-auto py-3 bg-light">
<nav class="text-center">
<ul class="list-inline">
<li class="list-inline-item"><a href="MainPage.html">Home</a></li>
<li class="list-inline-item"><a href="login.html">Login</a></li>
<li class="list-inline-item"><a href="About-Us.html">About Us</a></li>
<li class="list-inline-item"><a href="Blogs.html">Blogs</a></li>
</ul>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a id="logout-link" class="dropdown-item" href="#">Log-out</a></li>
</ul>
</nav>
<div class="text-center">
<p>Credits: Abdul Wahab, Hiba Rizwan, Hafsa Waseem</p>
<p>© 2024 BloodServe. All Rights Reserved.</p>
</div>
</footer>
<script>
document.getElementById('donorForm').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent the form from submitting the traditional way
const donationSpan = document.querySelector('select[name="donation_span"]').value;
const errorMessage = document.getElementById("errorMessage");
const successMessage = document.getElementById("successMessage");
// Validate the donation span
if (donationSpan && parseInt(donationSpan) < 3) {
errorMessage.textContent = "You cannot donate before 3 months.";
errorMessage.classList.remove("d-none");
successMessage.classList.add("d-none");
} else {
errorMessage.classList.add("d-none");
// Create a FormData object to easily access form values
const formData = new FormData(event.target);
// Convert FormData to a JSON object
const formDataJSON = {};
formData.forEach((value, key) => {
formDataJSON[key] = value;
});
// Send the POST request using fetch
fetch('http://localhost:10000/donor', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formDataJSON)
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
successMessage.classList.remove("d-none"); // Show success message
return response.json();
})
.then(data => {
console.log('Success:', data);
// Optionally handle success, e.g., display a success message or redirect
})
.catch(error => {
console.error('Error:', error);
// Optionally handle errors, e.g., display an error message
});
}
});
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFyJDd6j2vL6boUs4Ie7KNg6B5owJp2JJ4xCMGiw1FfJIl2x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>