/    Sign up×
Community /Pin to ProfileBookmark

Logical JavaScript and Form Help?

Copy linkTweet thisAlerts:
Aug 06.2010

I’m starting to write my GPA Calculator program over again this time using forms. [URL=”http://userpages.umbc.edu/~ofek1/gpacalc.html”]http://userpages.umbc.edu/~ofek1/gpacalc.html[/URL] is the old one and works fine. [URL=”http://userpages.umbc.edu/~ofek1/gpa.html”]http://userpages.umbc.edu/~ofek1/gpa.html[/URL] 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: [URL=”http://userpages.umbc.edu/~ofek1/gpacalc2.html”]http://userpages.umbc.edu/~ofek1/gpacalc…[/URL]

to post a comment
JavaScript

16 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangAug 07.2010 — <!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">



<i> </i> &lt;meta http-equiv="expires" content="Sat, 13 Sept 2008 12:00:00 GMT"&gt;
<i> </i> &lt;meta http-equiv="cache-control" content="no-cache"&gt;

<i> </i> &lt;title&gt;GPA Calculator&lt;/title&gt;

<i> </i> &lt;script type="text/javascript"&gt;

<i> </i> /***********************************************************************
<i> </i> ** ValidateCredits -
<i> </i> ** Input -
<i> </i> ** Output -
<i> </i> ***********************************************************************/

<i> </i> function ValidateCredits(validNumber)
<i> </i> {

<i> </i> validNumber = parseInt (validNumber);

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

<i> </i> else
<i> </i> {
<i> </i> return true;
<i> </i> }

<i> </i> }

<i> </i> /***********************************************************************
<i> </i> ** ValidatePoints -
<i> </i> ** Input -
<i> </i> ** Output -
<i> </i> ***********************************************************************/

<i> </i> function ValidatePoints(validNumber)
<i> </i> {

<i> </i> validNumber = parseInt (validNumber);

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

<i> </i> else
<i> </i> {
<i> </i> return true;
<i> </i> }

<i> </i> }

<i> </i> &lt;/script&gt;

<i> </i>&lt;/head&gt;&lt;body&gt;

<i> </i> &lt;script type="text/javascript"&gt;

<i> </i> var semester = prompt("Enter the semester: ");
<i> </i> var numCourses = 0;

<i> </i> while (numCourses &lt;= 0 || isNaN(numCourses))
<i> </i> {

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

<i> </i> }

<i> </i> numCourses = parseInt(numCourses);

<i> </i> while (numCourses &gt; 0)
<i> </i> {

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

<i> </i> numCourses = numCourses - 1;

<i> </i> }


<i> </i> &lt;/script&gt;

<i> </i>&lt;/body&gt;&lt;/html&gt;
Copy linkTweet thisAlerts:
@OfekmeisterauthorAug 07.2010 — 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?
Copy linkTweet thisAlerts:
@FangAug 07.2010 — By passing the object , not it's value&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;



<i> </i> &lt;meta http-equiv="expires" content="Sat, 13 Sept 2008 12:00:00 GMT"&gt;
<i> </i> &lt;meta http-equiv="cache-control" content="no-cache"&gt;

<i> </i> &lt;title&gt;GPA Calculator&lt;/title&gt;

<i> </i> &lt;script type="text/javascript"&gt;

<i> </i> /***********************************************************************
<i> </i> ** ValidateCredits -
<i> </i> ** Input -
<i> </i> ** Output -
<i> </i> ***********************************************************************/

<i> </i> function ValidateCredits(obj)
<i> </i> {

<i> </i> validNumber = parseInt (obj.value);

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

<i> </i> else
<i> </i> {
<i> </i> return true;
<i> </i> }

<i> </i> }

<i> </i> /***********************************************************************
<i> </i> ** ValidatePoints -
<i> </i> ** Input -
<i> </i> ** Output -
<i> </i> ***********************************************************************/

<i> </i> function ValidatePoints(obj)
<i> </i> {

<i> </i> validNumber = parseInt (obj.value);

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

<i> </i> else
<i> </i> {
<i> </i> return true;
<i> </i> }

<i> </i> }

<i> </i> &lt;/script&gt;

<i> </i>&lt;/head&gt;&lt;body&gt;

<i> </i> &lt;script type="text/javascript"&gt;

<i> </i> var semester = prompt("Enter the semester: ");
<i> </i> var numCourses = 0;

<i> </i> while (numCourses &lt;= 0 || isNaN(numCourses))
<i> </i> {

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

<i> </i> }

<i> </i> numCourses = parseInt(numCourses);

<i> </i> while (numCourses &gt; 0)
<i> </i> {

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

<i> </i> numCourses = numCourses - 1;

<i> </i> }


<i> </i> &lt;/script&gt;

<i> </i>&lt;/body&gt;&lt;/html&gt;
Copy linkTweet thisAlerts:
@OfekmeisterauthorAug 07.2010 — Could I also do it like this http://userpages.umbc.edu/~ofek1/gpa.html using counters formCredits and formPoints?
Copy linkTweet thisAlerts:
@FangAug 07.2010 — You can do, but if you want to say get total credits, it's easier if the [I]name [/I]is the same for all credit fields.
Copy linkTweet thisAlerts:
@OfekmeisterauthorAug 07.2010 — 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: [CODE]totalPoints = totalPoints + (validNumber * numPoints);[/CODE]

Then the final GPA can be calculated: [CODE]finalGPA = totalPoints / totalCredits;[/CODE]

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.
Copy linkTweet thisAlerts:
@OfekmeisterauthorAug 07.2010 — I'm still confused ?
Copy linkTweet thisAlerts:
@FangAug 07.2010 — The number of courses is not important; they are just simple collections (arrays) of data.

This would be the basic solution:&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;title&gt;&lt;/title&gt;

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

&lt;style type="text/css"&gt;
* {margin:0;padding:0;}
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
Number of credits: &lt;input type="text" name="credits" onchange="return ValidateCredits(this)"&gt;&lt;br&gt; Grade points earned: &lt;input type="text" name="points" onchange="return ValidatePoints(this)"&gt;
Number of credits: &lt;input type="text" name="credits" onchange="return ValidateCredits(this)"&gt;&lt;br&gt; Grade points earned: &lt;input type="text" name="points" onchange="return ValidatePoints(this)"&gt;
&lt;button type="button" onclick="totalizer()"&gt;totalizer&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@OfekmeisterauthorAug 07.2010 — 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
Copy linkTweet thisAlerts:
@FangAug 08.2010 — document.write('&lt;form onsubmit="TotalPoints(); [COLOR="Blue"]return false;[/COLOR]"&gt;');
Copy linkTweet thisAlerts:
@OfekmeisterauthorAug 08.2010 — 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!
Copy linkTweet thisAlerts:
@FangAug 08.2010 — Oops should be obj.value: function TotalPoints()
{

<i> </i> var validNumber = document.getElementsByName('credits');
<i> </i> var numPoints = document.getElementsByName('points');
<i> </i> var totalPoints = 0;

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

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

<i> </i> }

<i> </i> alert(totalPoints);

<i> </i> }
Copy linkTweet thisAlerts:
@OfekmeisterauthorAug 08.2010 — 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?
Copy linkTweet thisAlerts:
@FangAug 09.2010 — 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?
Copy linkTweet thisAlerts:
@OfekmeisterauthorAug 09.2010 — 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!
Copy linkTweet thisAlerts:
@FangAug 10.2010 — There's always room for improvement:

no frames version

dom methods and not document.write

server-side solution, no JavaScript
×

Success!

Help @Ofekmeister spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.22,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...