Forum Moderators: open

Message Too Old, No Replies

validating a form with javascript

         

lindaonline15

11:31 am on Oct 7, 2008 (gmt 0)

10+ Year Member



hi all.
here I am trying to make a calculator to calculate some GPA and CGPAs..
it is an HTML form that javascript validates the fields.
the problem here is that when I only had function calculate() the clculator was working perfectly. since I added validation functions, it no longer works and nothing happens on pressing submit button.
anyone here can tell me what is the problem here please?

this is the javascript code:
<script type = "text/javascript">

//function to set the focus on CGPA form
function setFocus() {
document.CGPA.focus();
return;
}

//functio to round 2 decimal points
//function round(n){return(.01* Math.round(100*n));}

function round(num) {
var num;
var result = Math.round(num*Math.pow(10,2))/Math.pow(10,2);
return result;
}

function formValidator(fr){
var check = "";
if (isEmpty(fr.CCGPA))
{check += "Please fill Current CGPA field\n";}
if (isEmpty(fr.GCGPA))
{check += "Please fill Goal CGPA field\n";}
if (isEmpty(fr.TCH))
{check += "Please fill Total Credit Hours field\n";}
if(isEmpty(fr.CCH))
{check += "Please fill Current Credit Hours field\n";}

check += CGPA(fr.CCGPA.value);
check += CGPA(fr.GCGPA.value);
check += TCH(fr.TCH.value);
check += CCH((fr.CCH.value);

if (check != "") {
alert(check);
return false;
}

return true;
calculate(fr);

}

function TCH(n){
var error = "";
if ((!parseInt(fr.TCH.value) >= 0 && parseInt(fr.TCH.value) <= 150))
{error = "Invalid Entry for Total Credit Hour!\n"}

return error;
}

function CCH(n){
var error = "";
if (!(parseInt(fr.CCH.value) >= 0 && parseInt(fr.CCH.value) <= 24))
{error = "Invalid Entry for Current Credit Hour!\n"}
return error;
}

function CGPA(n){
var error = "";
if(!(parseFloat(fr.CCGPA.value) >= 0 &&
parseFloat(fr.CCGPA.value) <= 4 &&
parseFloat(fr.GCGPA.value) >= 0 &&
parseFloat(fr.GCGPA.value) <= 4 &&))
{error = "Invalid Entry for CGPA!\n"}
return error;

}

//function to calculate GPA for desired CGPA
function calculate(fr)

{
var points = 0;

points = parseFloat(fr.GCGPA.value) * (parseFloat(fr.TCH.value)
+ parseFloat(fr.CCH.value));

points = points - (parseFloat(fr.CCGPA.value)*parseFloat(fr.TCH.value));

fr.result.value =
round(points/parseFloat(fr.CCH.value));

if (fr.result.value > 4)
{alert ("You cannot achieve CGPA "+ eval(fr.GCGPA.value) +" within "+ eval(fr.CCH.value) +" Credit Hours!") }
}

</script>

************************************************************************************
AND THIS IS THE HTML FORM:
<div><form action="none" name="CGPA" onsubmit='return formValidator()'>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="container-t">
<!--DWLayoutTable-->
<tr>
<td height="20" align="center"valign="middle" class="header">Goal CGPA Calcualtor</td>
</tr>
<tr>
<td valign="top">

<table width="100%" border="0" cellpadding="0" cellspacing="0"class="top-t">
<!--DWLayoutTable-->

<tr>

<td class="labelcell2" width="75%" height="23">My current CGPA is: </td>
<td width="25%" align="right">

<input type = "text" name="CCGPA" style="width: 100px" class="textfields" />
</td>
</tr>
<tr>
<td class="labelcell2" height="23">The number of Credit hours compeleted so far is:</td>
<td align="right"><input type = "text" name="TCH" style="width: 100px" class="textfields" /></td>
</tr>
<tr>
<td class="labelcell2" height="23">My goal CGPA is: </td>
<td align="right"><input type = "text" name="GCGPA" style="width: 100px" class="textfields" /></td>
</tr>
<tr>
<td class="labelcell2" height="23">The number of Credit Hours currently taking is:</td>
<td align="right"><input type = "text" name="CCH" style="width: 100px" class="textfields" /></td>
</tr>
</table> </td>
</tr>
<tr>
<td valign="top">

<table width="100%" class="bottom-t">
<!--DWLayoutTable-->
<tr>
<td width="35%" align="left"><!--sending information to calculate() function-->
<input class="button" type = "button" value = "Your Goal GPA is:" onclick = "calculate(this.form)" name = "bottun" /> </td>
<td width="32%" align="center"><!--getting back result from function-->
<input name="result" type = "text" class="results-textfields" style="width: 100px" size="8" readonly="true" /> </td>
<td width="17%" align="right"><input class="button" type="reset" name="reset" value="Clear" /></td>
<td width="16%" align="right"><input class="button" type="button" value="Print"
onclick="javascript: window.print()" name="button2" /></td>
</tr>

</table> </td>
</tr>
</table>
</form></div>

astupidname

11:46 pm on Oct 7, 2008 (gmt 0)

10+ Year Member



You have a number of syntax errors in the script (a ! out of place, an extra &&, missing terminators ; etc.), also some problems with the way you are handling some other things in the script. For one thing, I think you are getting a little carried away with the checking being partially done and then "farmed out" to a whole other function. I don't see the need for it or the excessive variety of error messages. I tinkered around with this for a while, and this is how I would do it, try this (I removed the table formatting for ease of posting less unnecessary code):

<script type = "text/javascript">
function round(num)
{
var result = Math.round(num*Math.pow(10,2))/Math.pow(10,2);
return result;
}

function formValidator(fr)
{
var check = "";
if (!(parseFloat(fr.CCGPA.value) > 0 && parseFloat(fr.CCGPA.value) <= 4))
{
check += "Improper or no entry in Current GPA field\n(must be greater than 0, and 4 or less please)\n\n";
}
if (!(parseInt(fr.CCH.value) > 0 && parseInt(fr.CCH.value) <= 150))
{
check += "Improper or no entry in number of Credit Hours completed field\n(must be greater than 0, and 150 or less please)\n\n";
}
if (!(parseFloat(fr.GCGPA.value) > 0 && parseFloat(fr.GCGPA.value) <= 4))
{
check += "Improper or no entry in Goal GPA field\n(must be greater than 0, and 4 or less please)\n\n";
}
if(!(parseInt(fr.TCH.value) > 0 && parseInt(fr.TCH.value) <= 24))
{
check += "Improper or no entry in number of Credit Hours taking field\n(must be greater than 0, and 24 or less please)\n\n";
}
if (check != "")
{
fr.result.value = "";
check += "\nPlease note all entries must be greater than 0 please";
alert(check);
return false;
}
calculate(fr);
}

function calculate(fr)
{
var points = 0;
points = parseFloat(fr.GCGPA.value) * (parseFloat(fr.CCH.value) + parseFloat(fr.TCH.value));
points = points - (parseFloat(fr.CCGPA.value)*parseFloat(fr.CCH.value));
points = round(points/parseFloat(fr.TCH.value));
if (points > 4)
{
fr.result.value = "";
alert("You cannot achieve the goal GPA of "+fr.GCGPA.value+" within "+fr.TCH.value+" Credit Hours!")
}
else
{
fr.result.value = points;
}
}
</script>

<div>
<form action="" name="CGPA">
<p>Goal CGPA Calcualtor<br />
My current GPA is: <input type = "text" name="CCGPA" style="width: 100px" class="textfields" /><br />
The number of Credit hours compeleted so far is: <input type = "text" name="CCH" style="width: 100px" class="textfields" />
<br />My goal GPA is: <input type = "text" name="GCGPA" style="width: 100px" class="textfields" /><br />
The number of Credit Hours currently taking is: <input type = "text" name="TCH" style="width: 100px" class="textfields" /><br />
<input class="button" type="button" value="Calculate" onclick="formValidator(this.form);" name="bottun" /><br />
Average Needed To Maintain To Achieve Goal: <input name="result" type = "text" class="results-textfields" style="width:100px" size="8" /><br /><input class="button" type="reset" name="reset" value="Clear" /><input class="button" type="button" value="Print" onclick="window.print()" name="button2" />
</p>
</form>
</div>

Please note that I flip-flopped the TCH & CCH fields names, as CCH seems more descriptive of "current credit hours completed" and TCH seems more descriptive of "taking credit hours". I just could get MY head on it better that way! I also re-ordered the order of the checking to be from top down, for simplicity. Also, I made it check for values greater than 0, as a 0 would "throw a wrench" into the equation.

astupidname

11:59 pm on Oct 7, 2008 (gmt 0)

10+ Year Member



I almost forgot to mention, I was going to point out to you that aside from the syntax errors, one of the biggest problems you had was in the validator function your - return true; was occurring before starting the calculate(fr); function! The validation function could never get to the calculator because the return stops the function! Just FYI

astupidname

12:35 am on Oct 8, 2008 (gmt 0)

10+ Year Member



p.p.s.
One other thing, you could also remove the external "round" function entirely if you make the calculate function like this:

function calculate(fr)
{
var points = 0;
points = parseFloat(fr.GCGPA.value) * (parseFloat(fr.CCH.value) + parseFloat(fr.TCH.value));
points = points - (parseFloat(fr.CCGPA.value)*parseFloat(fr.CCH.value));
points = points/parseFloat(fr.TCH.value);
points = Math.round(points*Math.pow(10,2))/Math.pow(10,2);
if (points > 4)
{
fr.result.value = "";
alert("You cannot achieve the goal GPA of "+fr.GCGPA.value+" within "+fr.TCH.value+" Credit Hours!")
}
else
{
fr.result.value = points;
}
}

I always like to keep the code as light as possible, and the less functions required, the better, IMO. Also, I don't think it is a good practice to name a new function as "round", as that is already a javascript function.
O.k. I am done now.. I think.... :) hope it helps you out, and good luck!

lindaonline15

1:43 am on Oct 9, 2008 (gmt 0)

10+ Year Member



yes i got it. thank you very much