\"Clear Entries\" button does not work, please help fix the Java codes. The butt
ID: 3918984 • Letter: #
Question
"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.
Note: The name of the file: survey.html
-------------------
Survey
Please fill in the online survey. Your answer will be stored in a database.
* are required fields.
First Name*:
Last Name*:
Gender*: MaleFemaleOther
Age*:
Grade Level*: Pre-School, 1st Grade, 2nd Grade, 3rd Grade, 4th Grade, 5th Grade, After 5th Grade
Additional Comment:
------------------------
<!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
Dear Student,
Use a Selection Listener to deal with with the button being pressed:
Or here is a sample solution that you might refer to :
<!DOCTYPE html>
<html>
<body>
<p>Enter some text in the fields below, then press the "Reset form" button to reset the form.</p>
<form id="myForm">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" value="Reset form">
</form>
<script>
function myFunction() {
document.getElementById("myForm").reset();
}
</script>
</body>
</html>
If you need any further help, feel free to revert back would behappy to help you. Happy Learning
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.