Why is my JavaScript Validation not alerting me if I leave the FaveDoctorReason text area blank? Instead it just takes me to the php file as if nothing is wrong. HTML Navigation Questioniare Image Overview The First Doctor The Second Doctor The Third Doctor The Fourth Doctor The Fifth Doctor The Sixth Doctor The Seventh Doctor The Eighth Doctor Who is your favorite doctor? Questionaire: Who is your favorite doctor from the hit science fiction show "Doctor Who"? Tell me why is this your favorite doctor actor or actress:
Why is my JavaScript Validation not alerting me if I leave the FaveDoctorReason text area blank?
Instead it just takes me to the php file as if nothing is wrong.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<html>
<body>
<head>
<meta charset="utf-8" />
<title>HTML</title>
<link rel="stylesheet" href="style.css">
<form action="SurveyResults.php" method="post">
</head>
<body>
<header class="header-image">
<img src="Tardis.jpg" alt="Header Image" width="1060" />
</header>
<table style="33%">
<tr>
<th>Navigation</th>
<th>Questioniare</th>
<th>Image</th>
</tr>
<tr>
<tr>
<td>
<ul>
<li><a href="Overview.html">Overview</a></li>
<li><a href="The_First_Doctor.html">The First Doctor </a></li>
<li><a href="The_Second_Doctor.html">The Second Doctor </a></li>
<li><a href="The_Third_Doctor.html">The Third Doctor </a></li>
<li><a href="The_Fourth_Doctor.html">The Fourth Doctor </a></li>
<li><a href="The_Fifth_Doctor.html">The Fifth Doctor </a></li>
<li><a href="The_Sixth_Doctor.html">The Sixth Doctor </a></li>
<li><a href="The_Seventh_Doctor.html">The Seventh Doctor </a></li>
<li><a href="The_Eighth_Doctor.html">The Eighth Doctor </a></li>
<li><li><a href="FavDoc.html">Who is your favorite doctor?</a></li></li>
</ul>
</td>
<td>
<form name="myform" onsubmit="return formValidation()" action="SurveyResults.php" method="post">
<form action="SurveyResults.php" method="post">
<fieldset>
<legend>Questionaire:</legend>
<p>Who is your favorite doctor from the hit science fiction show "Doctor Who"?
<select name="FavDoctor">
<option>William Hartnell</option>
<option>Patrick Troughton</option>
<option>Jon Pertwee</option>
<option>Tom Baker</option>
<option>Peter Davison</option>
<option>Colin Baker</option>
<option>Sylvester McCoy</option>
<option>Paul McGann</option>
</select>
</p>
<p><label for="FaveDoctorReason">Tell me why is this your favorite doctor actor or actress:</label></p>
<textarea name="FaveDoctorReason" rows="4" cols="48"></textarea>
</p>
<input type="submit">
</fieldset>
</form>
</td>
<td>
<img src="BlueBox.jpg" height="400" width="500" />
</td>
</tr>
</table>
<footer class="footer-image">
<img src="night-planets-header-8854-1024x300.jpg" alt="Footer Image" width="1060">
</footer>
<script>
function formValidation() {
// Validate FavDoctor selection
var selectedDoctor = document.myform.FavDoctor.value;
if (selectedDoctor === "") {
alert("Please select your favorite doctor");
return false;
}
// Validate FavDoctorReason
var faveDoctorReason = document.myform.FaveDoctorReason.value.trim();
if (faveDoctorReason === "") {
alert("Favorite Doctor reason can't be empty");
return false;
}
// If all validations pass, return true to submit the form
return true;
}
</script>
</body>
</html>
Step by step
Solved in 4 steps with 3 images
