Skip to content

Commit e09f1ba

Browse files
Harshdev098Harshdev098
authored
Merge pull request #439 from thatguywhocode/main
changes done
2 parents 2f9cd9c + 8859a0c commit e09f1ba

File tree

1 file changed

+78
-66
lines changed

1 file changed

+78
-66
lines changed

‎public/form_filling.html

+78-66
Original file line numberDiff line numberDiff line change
@@ -57,21 +57,21 @@
5757
User Form</h2>
5858
<div class="form-group">
5959
<label>Name</label>
60-
<input type="text" name="name" id="name">
60+
<input type="text" name="name" id="name" required>
6161
</div>
6262
<div class="form-group">
6363
<label>Email</label>
64-
<input type="email" name="email" id="email">
64+
<input type="email" name="email" id="email" required>
6565
<p id="emailError" style="font-size: 18px; color: red; font-weight: bold; display: none;"></p>
6666
</div>
6767
<div class="form-group">
6868
<label for="college">College Name</label>
69-
<input type="text" name="col_name" id="col_name" class="form-control" placeholder="Start typing your college name...">
69+
<input type="text" name="col_name" id="col_name" class="form-control" placeholder="Start typing your college name..." required>
7070
<ul id="collegeList" style="list-style-type: none; padding: 0;"></ul>
7171
</div>
7272
<div class="form-group">
7373
<label>State</label>
74-
<select name="state" id="state">
74+
<select name="state" id="state" required>
7575
<option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
7676
<option value="Andhra Pradesh">Andhra Pradesh</option>
7777
<option value="Arunachal Pradesh">Arunachal Pradesh</option>
@@ -111,7 +111,7 @@
111111
</div>
112112
<div class="form-group">
113113
<label>Department</label>
114-
<select name="dept" id="dept">
114+
<select name="dept" id="dept" required>
115115
<option value="Computer Science">Computer Science</option>
116116
<option value="Electronics">Electronics</option>
117117
<option value="Science">Science</option>
@@ -122,11 +122,11 @@
122122
</div>
123123
<div class="form-group">
124124
<label>Course</label>
125-
<input type="text" id="course" name="course">
125+
<input type="text" id="course" name="course" required>
126126
</div>
127127
<div class="form-group">
128128
<label>Year</label>
129-
<select name="year" id="year"></select>
129+
<select name="year" id="year" required></select>
130130
</div>
131131
<p id="result" style="display: none; font-size: 20px;color: green;font-weight: bold;">Form submitted
132132
Successfully... Redirecting...
@@ -232,70 +232,82 @@
232232
}
233233
});
234234

235-
document.getElementById('form').addEventListener('submit', async function (event) {
236-
event.preventDefault();
237-
const name = document.getElementById('name').value;
238-
const email = document.getElementById('email').value;
239-
const col_name = document.getElementById('col_name').value;
240-
const state = document.getElementById('state').value;
241-
const dept = document.getElementById('dept').value;
242-
const course = document.getElementById('course').value.toUpperCase();
243-
const year = document.getElementById('year').value;
235+
document.getElementById('form').addEventListener('submit', function (event) {
236+
event.preventDefault(); // Prevent default form submission
244237

245-
const result = document.getElementById('result');
246-
const result2 = document.getElementById('result2');
247-
const result3 = document.getElementById('result3');
238+
// Get all the input fields
239+
const name = document.getElementById('name').value.trim();
240+
const email = document.getElementById('email').value.trim();
241+
const col_name = document.getElementById('col_name').value.trim();
242+
const state = document.getElementById('state').value.trim();
243+
const dept = document.getElementById('dept').value.trim();
244+
const course = document.getElementById('course').value.trim();
245+
const year = document.getElementById('year').value.trim();
248246

249-
// Validate email domain again before submission
250-
const allowedDomains = ['gmail.com', 'yahoo.com', 'outlook.com', 'icloud.com', 'hotmail.com'];
251-
const emailDomain = email.split('@')[1]; // Get the domain part of the email
252-
if (!allowedDomains.includes(emailDomain)) {
253-
result2.innerText = "Please use an email from trusted providers (Gmail, Yahoo, Outlook, etc.)";
254-
result2.style.display = "block";
255-
setTimeout(() => {
256-
result2.style.display = "none";
257-
}, 3000);
258-
return; // Stop form submission
259-
}
247+
// Array of field values for easier validation
248+
const fields = [
249+
{ value: name, label: 'Name' },
250+
{ value: email, label: 'Email' },
251+
{ value: col_name, label: 'College Name' },
252+
{ value: state, label: 'State' },
253+
{ value: dept, label: 'Department' },
254+
{ value: course, label: 'Course' },
255+
{ value: year, label: 'Year' }
256+
];
260257

261-
const data = { name, email, col_name, state, course, year, dept };
262-
const token = localStorage.getItem('accessToken');
263-
const headers = new Headers();
264-
headers.append('Authorization', `Bearer ${token}`);
258+
// Check for empty fields
259+
const emptyFields = fields.filter(field => !field.value);
260+
if (emptyFields.length > 0) {
261+
const fieldNames = emptyFields.map(field => field.label).join(', ');
262+
alert(`Please fill the following fields: ${fieldNames}`);
263+
return; // Stop form submission
264+
}
265265

266-
try {
267-
const response = await fetch('/info', {
268-
method: 'POST',
269-
headers: {
270-
'Content-Type': 'application/json',
271-
'Authorization': `Bearer ${token}`,
272-
},
273-
body: JSON.stringify(data),
274-
});
275-
276-
console.log(response.status);
266+
// Validate email domain
267+
const allowedDomains = ['gmail.com', 'yahoo.com', 'outlook.com', 'icloud.com', 'hotmail.com'];
268+
const emailDomain = email.split('@')[1];
269+
if (!allowedDomains.includes(emailDomain)) {
270+
alert("Please use an email from trusted providers (Gmail, Yahoo, Outlook, etc.)");
271+
return;
272+
}
277273

278-
if (response.status == 200) {
279-
console.log("Information saved");
280-
result.style.display = "inline-block";
281-
setTimeout(() => {
282-
window.location.replace("main_page.html")
283-
}, 2000);
284-
}
285-
else if (response.status == 400) {
286-
result3.style.display = "inline-block";
287-
}
288-
else {
289-
console.log("Submission failed");
290-
result2.style.display = "block";
291-
setTimeout(() => {
292-
result2.style.display = "none";
293-
}, 2000);
294-
}
295-
} catch (error) {
296-
console.error("Error occurred", error);
297-
}
298-
});
274+
// If all fields are filled, proceed with form submission
275+
const data = { name, email, col_name, state, course, year, dept };
276+
const token = localStorage.getItem('accessToken');
277+
const headers = new Headers();
278+
headers.append('Authorization', `Bearer ${token}`);
279+
280+
fetch('/info', {
281+
method: 'POST',
282+
headers: {
283+
'Content-Type': 'application/json',
284+
'Authorization': `Bearer ${token}`,
285+
},
286+
body: JSON.stringify(data),
287+
})
288+
.then(response => {
289+
if (response.status == 200) {
290+
console.log("Information saved");
291+
document.getElementById('result').style.display = "inline-block";
292+
setTimeout(() => {
293+
window.location.replace("main_page.html");
294+
}, 2000);
295+
}
296+
else if (response.status == 400) {
297+
document.getElementById('result3').style.display = "inline-block";
298+
}
299+
else {
300+
console.log("Submission failed");
301+
document.getElementById('result2').style.display = "block";
302+
setTimeout(() => {
303+
document.getElementById('result2').style.display = "none";
304+
}, 2000);
305+
}
306+
})
307+
.catch(error => {
308+
console.error("Error occurred", error);
309+
});
310+
});
299311

300312
async function usercheck() {
301313
const token = localStorage.getItem('accessToken');

0 commit comments

Comments
 (0)