Web Development : \"Clear Entries\" button does not work, please help fix the Ja
ID: 3918985 • Letter: W
Question
Web Development: "Clear Entries" button does not work, please help fix the Java codes. The button is supposed to clear the entries that are being entered. Source codes are written below.
----------------
<!DOCTYPE html>
<html>
<title>Survey</title>
<script>
function doSubmit() {
if (validateFirstName() == false) {
alert("Invalid first name. ");
return;
}
if (validateLastName() == false) {
alert("Invalid last name. ");
return;
}
if (validateGender() == false) {
alert("Invalid gender. ");
return;
}
if (validateAge() == false) {
alert("Invalid age. ");
return;
}
if (validateGradeLevel() == false {
alert("Invalid grade level. ");
return;
}
alert("Your survey result had been submitted. ");
return;
}
function validateFirstName() {
var vFirst_Name = document.checking.First_Name.value;
if (vFirst_Name.length == 0) { return false; }
}
function validateLastName() {
var vLast_Name = document.checking.First_Name.value;
if (vLast_Name.length == 0) { return false; }
}
function validateGender() {
var vGender = document.checking.Gender.value;
if (vGender.equalsIgnoreCase("Male") ||
vGender.equalsIgnoreCase("Female") ||
vGender.equalsIgnoreCase("Other") || ) {
return false;
}
}
function validateAge() {
var vAge = document.checking.Age.value;
if (vAge <= 0 || vAge >= 1000) { return false; }
}
function validateGradeLevel {
var vGrade_Level = document.checking.Grade_Level.value;
if (vGrade_Level.equalsIgnoreCase("Pre-School") ||
vGrade_Level.equalsIgnoreCase("1st Grade") ||
vGrade_Level.equalsIgnoreCase("2nd Grade") ||
vGrade_Level.equalsIgnoreCase("3rd Grade") ||
vGrade_Level.equalsIgnoreCase("4th Grade") ||
vGrade_Level.equalsIgnoreCase("5th Grade") ||
vGrade_Level.equalsIgnoreCase("After 5th Grade") || ) {
return false;
}
}
function doClear()
{
document.checking.First_Name.value = "";
document.checking.Last_Name.value = "";
document.checking.getElementById('Gender').innerText = null;
document.checking.Age.value = "";
document.getElementById('Grade_Level').innerText = null;
return;
}
</script>
<body>
<form name="checking" method="POST">
<h3>Please fill in the online survey. Your answer will be stored in a database. </h3>
<p><b>* are required fields. </b></p>
<p>First Name<i>*</i>: <input type="text" name="First_Name" required>
Last Name<i>*</i>: <input type="text" name="Last_Name" required></p>
<p>Gender<i>*</i>: <select name="Gender" required>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select></p>
<p>Age<i>*</i>: <input type="number" name="Age" required></p>
<p>Grade Level<i>*</i>: <select name="Grade_Level" required>
<option value="preschool">Pre-School</option>
<option value="grade1">1st Grade</option>
<option value="grade2">2nd Grade</option>
<option value="grade3">3rd Grade</option>
<option value="grade4">4th Grade</option>
<option value="grade5">5th Grade</option>
<option value="higher_ed">After 5th Grade</option>
</select></p>
<p>Additional Comment: </p>
<p><input type="text" name="Add_Comment" class="more_comment"></p>
<p><input type="button" value="Clear Entries"></p>
<p><input type="submit" name="submit" value="Submit the Survey"></p>
</form>
<p><form action="home.html"><input type="submit" value="Go Back" /></p>
</body>
</html>
Explanation / Answer
There is a button type of reset in html which is used to clear the contents of a html form so by using that button type we can clear the content of our form for that you need to chage the code as follows
the code need to be changed is highlighted in bold in the below code
by using the reset button to clear the contents of the form we dont need to implement doclear() method in the java script.
Code:
<!DOCTYPE html>
<html>
<title>Survey</title>
<script>
function doSubmit() {
if (validateFirstName() == false) {
alert("Invalid first name. ");
return;
}
if (validateLastName() == false) {
alert("Invalid last name. ");
return;
}
if (validateGender() == false) {
alert("Invalid gender. ");
return;
}
if (validateAge() == false) {
alert("Invalid age. ");
return;
}
if (validateGradeLevel() == false) {
alert("Invalid grade level. ");
return;
}
alert("Your survey result had been submitted. ");
return;
}
function validateFirstName() {
var vFirst_Name = document.checking.First_Name.value;
if (vFirst_Name.length == 0) { return false; }
}
function validateLastName() {
var vLast_Name = document.checking.First_Name.value;
if (vLast_Name.length == 0) { return false; }
}
function validateGender() {
var vGender = document.checking.Gender.value;
if (vGender.equalsIgnoreCase("Male") ||
vGender.equalsIgnoreCase("Female") ||
vGender.equalsIgnoreCase("Other")) {
return false;
}
}
function validateAge() {
var vAge = document.checking.Age.value;
if (vAge <= 0 || vAge >= 1000) { return false; }
}
function validateGradeLevel() {
var vGrade_Level = document.checking.Grade_Level.value;
if (vGrade_Level.equalsIgnoreCase("Pre-School") ||
vGrade_Level.equalsIgnoreCase("1st Grade") ||
vGrade_Level.equalsIgnoreCase("2nd Grade") ||
vGrade_Level.equalsIgnoreCase("3rd Grade") ||
vGrade_Level.equalsIgnoreCase("4th Grade") ||
vGrade_Level.equalsIgnoreCase("5th Grade") ||
vGrade_Level.equalsIgnoreCase("After 5th Grade")) {
return false;
}
}
</script>
<body>
<form name="checking" method="POST">
<h3>Please fill in the online survey. Your answer will be stored in a database. </h3>
<p>
<b>* are required fields. </b>
</p>
<p>First Name
<i>*</i>:
<input type="text" name="First_Name" required> Last Name
<i>*</i>:
<input type="text" name="Last_Name" required>
</p>
<p>Gender
<i>*</i>:
<select name="Gender" required>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
</p>
<p>Age
<i>*</i>:
<input type="number" name="Age" required>
</p>
<p>Grade Level
<i>*</i>:
<select name="Grade_Level" required>
<option value="preschool">Pre-School</option>
<option value="grade1">1st Grade</option>
<option value="grade2">2nd Grade</option>
<option value="grade3">3rd Grade</option>
<option value="grade4">4th Grade</option>
<option value="grade5">5th Grade</option>
<option value="higher_ed">After 5th Grade</option>
</select>
</p>
<p>Additional Comment: </p>
<p>
<input type="text" name="Add_Comment" class="more_comment">
</p>
<p>
<input type="reset" value="Clear Entries">
</p>
<p>
<input type="submit" name="submit" value="Submit the Survey">
</p>
</form>
<p>
<form action="home.html">
<input type="submit" value="Go Back" />
</p>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.