-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy pathindex.html
72 lines (65 loc) · 3.61 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Ayush Kumar">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to Travel Form</title>
<link href="https://fonts.googleapis.com/css?family=Roboto|Sriracha&display=swap" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Aleo' rel='stylesheet'>
<link rel="stylesheet" href="style.css">
<script src = "https://code.jquery.com/jquery-3.6.0.min.js"
integrity = "sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin = "anonymous"></script>
</head>
<body>
<img class="bg" src="bg.jpg" alt="ABES ENGINEERING COLLEGE">
<div class="container">
<h1>Welcome to ABES ENGINEERING COLLEGE Mussorie Trip form</h3>
<p>Enter your details and submit this form to confirm your participation in the trip </p>
<p class='submitMsg'>Thanks for submitting your form. We are happy to see you joining us for the Mussorie trip</p>
<div id = "alert"></div>
<form id = "booking-form" onsubmit = "doBook(event);">
<input class="form" type="text" name="name" id="name" placeholder="Enter your name" required>
<input class="form" type="number" name="age" id="age" placeholder="Enter your Age" required>
<input class="form" type="text" name="gender" id="gender" placeholder="Enter your gender(MALE/FEMALE)" required>
<input class="form" type="email" name="email" id="email" placeholder="Enter your valid Email id" required>
<input class="form" type="phone" name="phone" id="phone" placeholder="Enter your phone" required>
<textarea name="desc" id="desc" cols="30" rows="10" placeholder="Enter anything else you want to add"></textarea>
<button class="btn">Submit</button>
<button class="btn">Reset</button>
</form>
</div>
<script src="index.js"></script>
<script type = "text/javascript">
var reference = document.getElementById("alert");
var form = document.getElementById("booking-form");
function doTransfer(event) {
event.preventDefault();
if(form["name"].value.length < 5) {
error = "<span>Name must be at least five characters long!</span>";
reference.innerHTML = error;
} else if(form["name"].value.length > 30) {
error = "<span>Name too long, must be at most thirty characters long!</span>";
reference.innerHTML = error;
} else if(form["age"].value > 10 && form["age"].value < 50) {
error = "<span>Age must be a number in between ten to fifty!</span>";
reference.innerHTML = error;
} else if(form["gender"].value != "MALE" && form["gender"].value != "FEMALE") {
error = "<span>Gender must be in acceptabe format(MALE/FEMALE)!</span>";
reference.innerHTML = error;
} else if(form["phone"].value.length != 10) {
error = "<span>Phone number must be valid!</span>";
reference.innerHTML = error;
} else {
$.ajax({
type: "POST",
url: "index.php",
data: "name=" + form["name"].value + "&gender=" + form["gender"].value + "&age=" + form["age"].value + "&email=" + form["email"].value + "&phone=" + form["phone"].value + "&desc=" + form["desc"].value,
success: function() {}
});
}
}
</script>
</body>
</html>