Logical JavaScript and Form Help?

This site is best viewed in a modern browser with JavaScript enabled.

Ofekmeister

I'm starting to write my GPA Calculator program over again this time using forms. http://userpages.umbc.edu/~ofek1/gpacalc.html is the old one and works fine. http://userpages.umbc.edu/~ofek1/gpa.html is what I'm working on. Can someone tell me why I don't get the error alerts when I enter incorrect data in the forms? The functions worked in the beginning here: http://userpages.umbc.edu/~ofek1/gpacalc…

Fang

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">



	<meta http-equiv="expires" content="Sat, 13 Sept 2008 12:00:00 GMT">
	<meta http-equiv="cache-control" content="no-cache">

	<title>GPA Calculator</title>

	<script type="text/javascript">

		/***********************************************************************
		** ValidateCredits - 
		** Input - 
		** Output - 
		***********************************************************************/

		function ValidateCredits(validNumber)
		{

			validNumber = parseInt (validNumber);

			if (validNumber <= 0 || validNumber >= 5 || isNaN(validNumber))
			{
			alert("Enter a positive integer from 1 to 4");
			return false;
			}

			else 
			{
			return true;
			}

		}

		/***********************************************************************
		** ValidatePoints - 
		** Input - 
		** Output - 
		***********************************************************************/

		function ValidatePoints(validNumber)
		{

			validNumber = parseInt (validNumber);

			if (validNumber != 4 && validNumber != 3 && validNumber != 2 && validNumber != 1 && validNumber != 0)
			{
			alert("Enter a positive integer from 0 to 4");
			return false;
			}

			else 
			{
			return true;
			}

		}

	</script>

</head><body>

	<script type="text/javascript">

		var semester = prompt("Enter the semester: ");
		var numCourses = 0;

		while (numCourses <= 0 || isNaN(numCourses))
		{

			numCourses = prompt("How many courses are you taking in the " + semester + " semester?");

		}

		numCourses = parseInt(numCourses);

		while (numCourses > 0)
		{

			document.write('Number of credits: <input type="text" name="credits" onchange="return ValidateCredits(this.value)"><br> Grade points earned: <input type="text" name="points" onchange="return ValidatePoints(this.value)"> <br>');

			numCourses = numCourses - 1;

		}


    </script>

</body></html>

Ofekmeister

Thank you so much! Also, is there a way to change the name or id of each form in the while loop so individual form values can be accessed when doing the calculations?

Fang

By passing the object , not it's value

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">



	<meta http-equiv="expires" content="Sat, 13 Sept 2008 12:00:00 GMT">
	<meta http-equiv="cache-control" content="no-cache">

	<title>GPA Calculator</title>

	<script type="text/javascript">

		/***********************************************************************
		** ValidateCredits - 
		** Input - 
		** Output - 
		***********************************************************************/

		function ValidateCredits(obj)
		{

			validNumber = parseInt (obj.value);

			if (validNumber <= 0 || validNumber >= 5 || isNaN(validNumber))
			{
			alert("Enter a positive integer from 1 to 4");
			obj.value = "";
			obj.focus();
			return false;
			}

			else 
			{
			return true;
			}

		}

		/***********************************************************************
		** ValidatePoints - 
		** Input - 
		** Output - 
		***********************************************************************/

		function ValidatePoints(obj)
		{

			validNumber = parseInt (obj.value);

			if (validNumber != 4 && validNumber != 3 && validNumber != 2 && validNumber != 1 && validNumber != 0)
			{
			alert("Enter a positive integer from 0 to 4");
			obj.value = "";
			obj.focus();
            return false;
			}

			else 
			{
			return true;
			}

		}

	</script>

</head><body>

	<script type="text/javascript">

		var semester = prompt("Enter the semester: ");
		var numCourses = 0;

		while (numCourses <= 0 || isNaN(numCourses))
		{

			numCourses = prompt("How many courses are you taking in the " + semester + " semester?");

		}

		numCourses = parseInt(numCourses);

		while (numCourses > 0)
		{

			document.write('Number of credits: <input type="text" name="credits" onchange="return ValidateCredits(this)"><br> Grade points earned: <input type="text" name="points" onchange="return ValidatePoints(this)"> <br>');

			numCourses = numCourses - 1;

		}


    </script>

</body></html>

Ofekmeister

Could I also do it like this http://userpages.umbc.edu/~ofek1/gpa.html using counters formCredits and formPoints?

Fang

You can do, but if you want to say get total credits, it's easier if the name is the same for all credit fields.

Ofekmeister

I would do it your way it's just that in order to get totalPoints you take the credits a course is worth multiplied by the points you earned for it and THAT number is added to totalPoints http://userpages.umbc.edu/~ofek1/gpacalc.html:

totalPoints = totalPoints + (validNumber * numPoints);

Then the final GPA can be calculated:

finalGPA = totalPoints / totalCredits;

I suppose I'm so confused because I've never had to use objects like document.getElementById to retrieve data, which is what I'll have to do to access the forms. It's also difficult because it's not a fixed number of forms, the user can enter however many courses they're taking???

Btw Fang, you've been more helpful than dozens of websites and Yahoo! answers.

Ofekmeister

I'm still confused

Fang

The number of courses is not important; they are just simple collections (arrays) of data.
This would be the basic solution:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>

<script type="text/javascript">
function totalizer() {
var validNumber = document.getElementsByName('credits');
var numPoints = document.getElementsByName('points');
var totalPoints = 0;
for(var i=0; len=validNumber.length, i<len; i++) {
    if(!ValidateCredits(validNumber[i]) || !ValidatePoints(numPoints[i])) {
        return;
        }
    totalPoints = totalPoints + (validNumber[i] * numPoints[i]);
    }
alert(totalPoints);
}
</script>

<style type="text/css">
* {margin:0;padding:0;}
</style>

</head>
<body>
Number of credits: <input type="text" name="credits" onchange="return ValidateCredits(this)"><br> Grade points earned: <input type="text" name="points" onchange="return ValidatePoints(this)">
Number of credits: <input type="text" name="credits" onchange="return ValidateCredits(this)"><br> Grade points earned: <input type="text" name="points" onchange="return ValidatePoints(this)">
<button type="button" onclick="totalizer()">totalizer</button>
</body>
</html>

Ofekmeister

I'm trying to view the alert in your function that says the totalPoints when I submit the form but the error message from ValidateCredits appears instead and then it reloads the page? http://userpages.umbc.edu/~ofek1/gpa.html

Fang

document.write('<form onsubmit="TotalPoints(); [COLOR="Blue"]return false;[/COLOR]">');

Ofekmeister

The page doesn't get reloaded now, which is good, but the error message from ValidateCredits still appears? http://userpages.umbc.edu/~ofek1/gpa.html Once again Fang, I really appreciate your help!

Fang

Oops should be obj.value:

			function TotalPoints() 			
			{

			var validNumber = document.getElementsByName('credits');
			var numPoints = document.getElementsByName('points');
			var totalPoints = 0;

			for (var i=0; len=validNumber.length, i<len; i++) 
			{
				if (!ValidateCredits(validNumber[i].value) || !ValidatePoints(numPoints[i].value)) 
				{				
					return;
				}

				totalPoints = totalPoints + (validNumber[i].value * numPoints[i].value);

			}

			alert(totalPoints);

		}

Ofekmeister

Almost done, thank you! I also wrote the functions TotalCredits, CalculateGPA, and GenerateGradeReport. http://userpages.umbc.edu/~ofek1/gpa.html Though now when I call the function GenerateGradeReport, it correctly error checks but does not stop the submit if incorrect data is entered??? Btw, the final product will be http://userpages.umbc.edu/~ofek1/gc.html. Is there a way to have GenerateGradeReport write in the second frame, or will I need to learn ASP?

Fang

The use of document.write in GenerateGradeReport is writing a new document. It would be better to write elements to the document using DOM methods.

Easy enough to write to a frame, but why use a frame?

Ofekmeister

Here's the final program: http://userpages.umbc.edu/~ofek1/gpa.html I couldn't have done it without your insight Fang! Let me know if you think it can be improved!

Fang

There's always room for improvement:
no frames version
dom methods and not document.write
server-side solution, no JavaScript