The question is this- Create Home Page With button “Book Appointment” ,once click button following component of page should be shown. The form should look like this
After submitting form only thankyou section should appear
Do page validation once click on submit button. Once click on submit button Thank You component of page should be shown on screen. Only single page should be present.
This is my code:-
<script>
function booking() {
const form = document.querySelector('#signup');
form.style.display = 'block';
document.querySelector('#b1').style.display = 'none';
}
function validateForm() {
let mobile = document.querySelector("#mobile")
let name = document.querySelector("#name")
let pdate = document.querySelector("#pdate")
let timeslot = document.querySelector("#TimeSlot")
let language = document.querySelector("#language")
while (mobile.value == "") {
document.getElementById("mobile").textContent = "*Please enter mobile no.";
mobile.focus();
return false;
}
while (name.value == "") {
document.getElementById("name").innerHTML = "*Please enter your name.";
name.focus();
return false;
}
while (pdate.value == "") {
alert("Please Select Date.");
pdate.focus();
return false;
}
while (timeslot.value == "") {
alert("Please Select One.");
timeslot.focus();
return false;
}
while (language.value == "") {
alert("Please Select One.");
language.focus();
return false;
}
return true;
}
function submit() {
const thanks = document.querySelector('#thanks');
thanks.style.display = 'block';
document.querySelector('#signup').style.display = 'none';
}
</script><style>
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
align-items: center;
justify-content: center;
}
#signup,
#thanks {
display: none;
}
button {
background-color: lightgreen;
border-radius: .25em;
}
div,
h1 {
text-align: center;
}
span {
color: red;
}
#b1 {
background-color: lightskyblue;
}
</style><!DOCTYPE html>
<html language="en">
<head>
<meta charset="UTF-8">
<title>Book Appointment</title>
</head>
<body>
<button onclick="booking()" id="b1">Book Appointment</button>
<br>
<div id="signup">
<h1>Schedule Your Free Tele-Consultation</h1>
<hr>
<label for="mobile">
<h3>Registered Mobile Number <span>*</span></h3>
</label>
<input type="tel" name="mobile" id="mobile" size="10" required>
<br>
<label for="name">
<h3>Name <span>*</span></h3>
</label>
<input type="text" name="name" id="name" required>
<br>
<label for="pdate">
<h3>Preferred Date <span>*</span></h3>
</label>
<input type="date" placeholder="dd-mm-yy" name="pdate" id="pdate" required>
<br>
<label for="TimeSlot">
<h3>Preferred Time Slot <span>*</span></h3>
</label>
<select name="TimeSlot" id="TimeSlot" required>
<option value="">Select Time Slot</option>
<option value="10 AM to 12 PM">10 AM to 12 PM</option>
<option value="2 PM to 4 PM">2 PM to 4 PM</option>
<option value="4 PM to 6 PM">4 PM to 6 PM</option>
</select>
<br>
<label for="language">
<h3>Preferred Language <span>*</span></h3>
</label>
<select name="language" id="language" required>
<option value="">Select your Language</option>
<option value="Hindi">Hindi</option>
<option value="English">English</option>
</select>
<br><br>
<button type="button" onclick="let bool = validateForm(); if(bool === true) submit();">
Submit</button>
</div>
<h1 id="thanks">
Thank you! Your response has been submitted.
</h1>
</body>
</html>I have used alert to validate here but I thought of using innerText or textContent to show error but it isn't working. It just focuses on the element but doesn't show the error. I have not used form element here because it submits the form and reloads but but I want to show the section of Thank you. This HandsOn was given by our Ma'am and she told us to use innerText to show the error with "*" symbol but I don't think we can do this way, If somebody comes up with something Please do share!
CodePudding user response：
You need to use value and not innerHTML or textContent on a input tag.
So your Javascript code's supposed to look like this now:
<script>
function booking() {
const form = document.querySelector('#signup');
form.style.display = 'block';
document.querySelector('#b1').style.display = 'none';
}
function validateForm() {
let mobile = document.querySelector("#mobile")
let name = document.querySelector("#name")
let pdate = document.querySelector("#pdate")
let timeslot = document.querySelector("#TimeSlot")
let language = document.querySelector("#language")
while (mobile.value == "") {
document.getElementById("mobile").value = "*Please enter mobile no.";
mobile.focus();
return false;
}
while (name.value == "") {
document.getElementById("name").value = "*Please enter your name.";
name.focus();
return false;
}
while (pdate.value == "") {
alert("Please Select Date.");
pdate.focus();
return false;
}
while (timeslot.value == "") {
alert("Please Select One.");
timeslot.focus();
return false;
}
while (language.value == "") {
alert("Please Select One.");
language.focus();
return false;
}
return true;
}
function submit() {
const thanks = document.querySelector('#thanks');
thanks.style.display = 'block';
document.querySelector('#signup').style.display = 'none';
}
</script>
I'd also recommend to ditch the return at the end of every while because it doesn't let the next code to run, so the message can appear only on the mobile number field and not the name field at once if both are empty (unless you want two clicks to happen to show the message in the name field, and I can't think why you'd want to do that).
If you really want to know if some field has some text entered or not, you could have an object or an array to which you push false to every time something's not filled in.
CodePudding user response：
//Try this one
//your validateform function will be
function validateForm() {
let mobile = document.querySelector("#mobile")
let name = document.querySelector("#name")
let pdate = document.querySelector("#pdate")
let timeslot = document.querySelector("#TimeSlot")
let language = document.querySelector("#language")
let error = "";
while (mobile.value == "") {
document.getElementById("mobile").textContent = "*Please enter mobile no.";
mobile.focus();
error = "Please Enter Mobile Number";
}
while (name.value == "") {
document.getElementById("name").innerHTML = "*Please enter your name.";
name.focus();
error = "Please Enter Name";
}
while (pdate.value == "") {
alert("Please Select Date.");
pdate.focus();
error = "Please Enter PDate";
}
while (timeslot.value == "") {
alert("Please Select One.");
timeslot.focus();
error = "Please Enter TimeSlot";
}
while (language.value == "") {
alert("Please Select One.");
language.focus();
error = "Please Enter Languages";
}
if (error != "") {
alert(error);
return false;
}
return true;
}
//and the booking function
function booking() {
if(validateForm){
const form = document.querySelector('#signup');
form.style.display = 'block';
document.querySelector('#b1').style.display = 'none';
submit()
}
}