Hello I am having trouble running a form validation this is what I need to do:"
Create a Web page that meets these specifications:
1. Revisit the grade average calculation program. Name the file validgrade.html. You will validate each of the grades to make sure it is present and that it is an acceptable letter grade. In other words, you are forcing the user to put in 4 letters in order to calculate a grade average.
2. Use comments to describe what the various parts of the script are accomplishing.
3. Hide the script from non-friendly browsers.
4. Validation specifications:
a. Letter grade only (no plus or minus).
b. Each input box must contain a grade.
c. An alert box should appear when an incorrect entry was made and it should be specific to the error. In other words, if the user did not put in an appropriate letter grade, it should say “Please enter a letter grade,” or if the input box was left blank, it should say “Please fill in each box.” Test to make sure both upper and lower case letters work.
d. The grade computation and reporting work exactly as it did in the In Class Assignment Chapter 7B.
5. Test the page to make sure it provides the correct feedback in all cases. Try numbers, characters, and special characters in all of the input boxes. Be sure to try a blank.
6. Publish the file to the server."
I have tried putting in if/else and else if statements but I could not get them to work (and this is what we are suppose to be using) so that is why I am here, I am not sure how to do this with the current code that I have:
<html>
<head>
<title> Phil Blair OIS1520A Fall 2011</title>
<meta name="description" content="Phil Blair work from Fall 2011 in OIS 1250A at Marion Technical College." />
<meta name="keywords" content="OIS1250A, Marion Technical College, MTC, Phil Blair" />
</head>
<table width="1000" height="150" border="0" align="center" cellpadding="0" cellspacing="0">
<td width="150" height="150" align="center" valign="middle">
<img src ="mtclogo.gif" height="150" align="center" valign="middle" width="150"/></td><td width="850" height="150" align="left" valign="middle"><h1>Phil Blair</h1></td>
</table>
<table width="1000" height="20" border="0" align="center" valign="middle" >
<td align="center" valign="middle">
<script language="JavaScript">
var now = new Date()
var time = now.getHours()
if (time < 12)
{
document.write("Good Morning, , I can assist you with determining your current average.<br> Type letter grades to respond to the questions.</br>")
}
if (time == 12)
{
document.write("It is noon, I can assist you with determining your current average.<br> Type letter grades to respond to the questions.</br>")
}
if (time > 12)
{
document.write("Good evening! I can assist you with determining your current average.<br> Type letter grades to respond to the questions.</br>")
}
</script></td>
<noscript>Your browser does not support JavaScript!</noscript>
</table>
<script language="JavaScript">
function gradePointAverage()
{
var totalQualityPoints = 0
var gradeStrings = new Array (4)
gradeStrings [0] = document.form1.firstGrade.value
gradeStrings [1] = document.form1.secondGrade.value
gradeStrings [2] = document.form1.thirdGrade.value
gradeStrings [3] = document.form1.forthGrade.value
for (var i = 0; i< gradeStrings.length; i++){
if (gradeStrings[i] =="A" || gradeStrings [i] =="a")
{totalQualityPoints = totalQualityPoints + 4}
if (gradeStrings[i] =="B" || gradeStrings[i] =="b")
{ totalQualityPoints = totalQualityPoints + 3}
if (gradeStrings[i] =="C" || gradeStrings[i] =="c")
{totalQualityPoints = totalQualityPoints + 2}
if (gradeStrings[i] =="D" || gradeStrings[i] =="d")
{ totalQualityPoints = totalQualityPoints + 1}
if (gradeStrings[i] =="F" || gradeStrings[i] =="f")
{ totalQualityPoints = totalQualityPoints + 0}
var gpa = totalQualityPoints/4
}
alert("Your grade point average is " + gpa +"!")
}
</script>
<noscript>Your browser does not support JavaScript!</noscript>
<form name="form1">
<table width="1000" height="20" border="0" align="center" valign="middle">
<td width="1000" align="left" valign="middle"><i><i><b>What is your first grade? </b></i> <input type="text" name="firstGrade" style="width:50px;"</td>
</table>
<table width="1000" height="20" border="0" align="center" valign="middle">
<td width="1000" align="left" valign="middle"><i><b>What is your second grade? </i></b> <input type="text" name="secondGrade" style= "width:50px;"</td>
</table>
<table width="1000" height="20" border="0" align="center" valign="middle">
<td width="1000" align="left" valign="middle"><i><b>What is your third grade? </i></b> <input type="text" name="thirdGrade" style= "width:50px;"</td>
</table>
<table width="1000" height="20" border="0" align="center" valign="middle">
<td width="1000" align="left" valign="middle"><i><b>What is your forth grade? </i></b> <input type="text" name="forthGrade" style= "width:50px;"</td>
</table>
<table width="1000" height="20" border="0" align="center" valign="middle">
<td width="1000" align="left" valign="middle"><input type="button" value="Submit" onClick="gradePointAverage()"> <input type="button" value="Reset" onClick="reset()"></td>
</table>
</form>
<table width="1000" height="30" border="0" align="center" valign="middle">
<td width="950" align="left" valign="middle"><h6> Visit the <a href="http://www.mtc.edu"> Marion Techical College </a> Web site to learn more about Interactive Media.
<br>The current time is: <script language="JavaScript">var date = new Date();document.write(date.getHours() +":"+ date.getMinutes() +".");</script>
<script type="text/javascript">
var d=new Date();
var weekday=new Array(7);
weekday[0]="Sunday";
weekday[1]="Monday";
weekday[2]="Tuesday";
weekday[3]="Wednesday";
weekday[4]="Thursday";
weekday[5]="Friday";
weekday[6]="Saturday";
document.write("The Current Day is " + weekday[d.getDay()]);
</script>
<noscript>Your browser does not support JavaScript!</noscript>
<br>©Phil Blair, Marion Technical College, 2011</br></br></h6></td>
</table>
</html>Can someone please give me some suggestions and advice. ps I am a beginner as well.
Thanks for any help given!