• Status: Solved
• Priority: Medium
• Security: Public
• Views: 176

# Calculations

Hi!

I need help in writing a very small program using JavaScript.
Below is the description:

---BEGIN---

I have a form containing 4 text fields to allow users to enter data in currency form (i.e. \$xxx.xx) and 1 field to get the number of years/months. 2 buttons, one to compute and the other to clear the fields.

Upon user clicking the "compute" button, the scripts will start to validate the fields to ensure that none contains non-digits. The script will also check that user enter the currency in the order of xxx.xx. User do not have to enter the "\$' sign.

After successful validation, the script will take the sum of the 4 fields, multiply by 0.5%, multiply by the number of months (if in years, need to convert to months).

The result will be displayed on the same screen, preferably after the 2 buttons.

---END---

Hopefully someone can help me solve this problem. If you can provide me with all the codes, it'll be great! I need this urgently....can someone help?? Thank alot!
0
Cantona
• 11
• 6
1 Solution

IT ExpertCommented:
Can do. I will lock this until done...

Michel
0

IT ExpertCommented:
Here is the page without validation (to get you started) I will now add the validation you needed.

<HTML>
<SCRIPT LANGUAGE="JavaScript"><!-- // cloak
/* Calculation script (c) 1998 Michel Plungjan michel@irt.org */
function calculate(theForm) {
Sum = validate(theForm.Val1.value);
Sum+= validate(theForm.Val2.value);
Sum+= validate(theForm.Val3.value);
Sum+= validate(theForm.Val4.value);
Sum = Sum/100*0.5;
Period = theForm.Period.value;
if (theForm.Units[1].checked) Period *= 12;
theForm.Result.value = Sum*Period;
}
function validate(num) {
return parseInt(num);

}
// uncloak --></SCRIPT>
<FORM>
<TABLE>
<TR>
<TD>Value 1</TD><TD><INPUT TYPE="TEXT" NAME="Val1"></TD>
</TR>
<TR>
<TD>Value 2</TD><TD><INPUT TYPE="TEXT" NAME="Val2"></TD>
</TR>
<TR>
<TD>Value 3</TD><TD><INPUT TYPE="TEXT" NAME="Val3"></TD>
</TR>
<TR>
<TD>Value 4</TD><TD><INPUT TYPE="TEXT" NAME="Val4"></TD>
</TR>
<TR>
<TD>Period</TD><TD><INPUT TYPE="TEXT" NAME="Period"> <BR>months <INPUT TYPE="RADIO" NAME="Units" CHECKED VALUE="1"> years <INPUT TYPE="RADIO" NAME="Units" VALUE="12"></TD>
</TR>
<TR>
<TD COLSPAN=2 ALIGN="CENTER"><INPUT TYPE="BUTTON" VALUE="Compute" onClick="calculate(this.form)"> <INPUT TYPE="RESET" VALUE="Reset"></TD>
</TR>
<TR>
<TD>Result</TD><TD><INPUT TYPE="TEXT" NAME="Result"></TD>
</TR>
</TABLE>

</HTML>

0

IT ExpertCommented:
And one WITH validation:
<HTML>
<SCRIPT LANGUAGE="JavaScript"><!-- // cloak
/* Calculation script (c) 1998 Michel Plungjan michel@irt.org */
FatalError = false;
function calculate(theForm) {
Sum = validate(theForm.Val1.value);
Sum+= validate(theForm.Val2.value);
Sum+= validate(theForm.Val3.value);
Sum+= validate(theForm.Val4.value);
Sum = Sum/100*0.5;
Period = parseInt(theForm.Period.value);
if (theForm.Units[1].checked) Period *= 12;
if (FatalError) theForm.Result.value = 'Sorry, cannot compute';
else theForm.Result.value = Sum*Period;
FatalError = false;
}
function validate(checkString) {
/* Check based on Netscape's Robert W. Husted's toFloat */

newString = "";    // Revised/corrected string

for (var dots=0, i=0, n=checkString.length; i < n; i++) {
ch = checkString.substring(i, i+1);

// CHECK EACH CHARACTER
if ((ch >= "0" && ch <= "9") || (ch == ".")) {
newString += ch;
if (ch == '.') dots++;
}
}
if (dots > 1) { alert('The value ' + checkString + ' contains too many decimal points'); FatalError = true; return 0; }
if (checkString != newString) {
if (confirm('The value ' + checkString + 'you have entered\ncontains invalid characters,\nis it okay to remove them?')) {
checkString = newString;
} // else return original string
}
return parseFloat(checkString);
}

// uncloak --></SCRIPT>
<FORM>
<TABLE>
<TR>
<TD>Value 1</TD><TD><INPUT TYPE="TEXT" NAME="Val1"></TD>
</TR>
<TR>
<TD>Value 2</TD><TD><INPUT TYPE="TEXT" NAME="Val2"></TD>
</TR>
<TR>
<TD>Value 3</TD><TD><INPUT TYPE="TEXT" NAME="Val3"></TD>
</TR>
<TR>
<TD>Value 4</TD><TD><INPUT TYPE="TEXT" NAME="Val4"></TD>
</TR>
<TR>
<TD>Period</TD><TD><INPUT TYPE="TEXT" NAME="Period"> <BR>months <INPUT TYPE="RADIO" NAME="Units" CHECKED VALUE="1"> years <INPUT TYPE="RADIO" NAME="Units" VALUE="12"></TD>
</TR>
<TR>
<TD COLSPAN=2 ALIGN="CENTER"><INPUT TYPE="BUTTON" VALUE="Compute" onClick="calculate(this.form)"> <INPUT TYPE="RESET" VALUE="Reset"></TD>
</TR>
<TR>
<TD>Result</TD><TD><INPUT TYPE="TEXT" NAME="Result"></TD>
</TR>
</TABLE>

</HTML>

0

IT ExpertCommented:
Oops, forgot two decimals only and an end form:

<HTML>
<SCRIPT LANGUAGE="JavaScript"><!-- // cloak
/* Calculation script (c) 1998 Michel Plungjan michel@irt.org */
FatalError = false;
function calculate(theForm) {
Sum = validate(theForm.Val1.value);
Sum+= validate(theForm.Val2.value);
Sum+= validate(theForm.Val3.value);
Sum+= validate(theForm.Val4.value);
Sum = Sum/100*0.5;
Period = parseInt(theForm.Period.value);
if (theForm.Units[1].checked) Period *= 12;
if (FatalError) theForm.Result.value = 'Sorry, cannot compute';
else theForm.Result.value = Sum*Period;
FatalError = false;
}
function validate(checkString) {
/* Check based on Netscape's Robert W. Husted's toFloat */

newString = "";    // Revised/corrected string

for (var dots=0, decs=0, i=0, n=checkString.length; i < n; i++) {
ch = checkString.substring(i, i+1);

// CHECK EACH CHARACTER
if ((ch >= "0" && ch <= "9") || (ch == ".")) {
newString += ch;
if (ch == '.') dots++;
else if (dots==1) decs++;

}
}
if (dots > 1) { alert('The value ' + checkString + ' contains too many decimal points'); FatalError = true; return 0; }
if (decs > 2) { alert('The value ' + checkString + ' contains too many decimals'); FatalError = true; return 0; }
if (checkString != newString) {
if (confirm('The value ' + checkString + 'you have entered\ncontains invalid characters,\nis it okay to remove them?')) {
checkString = newString;
} // else return original string
}
return parseFloat(checkString);
}

// uncloak --></SCRIPT>
<FORM>
<TABLE>
<TR>
<TD>Value 1</TD><TD><INPUT TYPE="TEXT" NAME="Val1"></TD>
</TR>
<TR>
<TD>Value 2</TD><TD><INPUT TYPE="TEXT" NAME="Val2"></TD>
</TR>
<TR>
<TD>Value 3</TD><TD><INPUT TYPE="TEXT" NAME="Val3"></TD>
</TR>
<TR>
<TD>Value 4</TD><TD><INPUT TYPE="TEXT" NAME="Val4"></TD>
</TR>
<TR>
<TD>Period</TD><TD><INPUT TYPE="TEXT" NAME="Period"> <BR>months <INPUT TYPE="RADIO" NAME="Units" CHECKED VALUE="1"> years <INPUT TYPE="RADIO" NAME="Units" VALUE="12"></TD>
</TR>
<TR>
<TD COLSPAN=2 ALIGN="CENTER"><INPUT TYPE="BUTTON" VALUE="Compute" onClick="calculate(this.form)"> <INPUT TYPE="RESET" VALUE="Reset"></TD>
</TR>
<TR>
<TD>Result</TD><TD><INPUT TYPE="TEXT" NAME="Result"></TD>
</TR>
</TABLE>
</FORM>
</HTML>

0

Author Commented:
hi Michel

thanks for your solution but I still need to clarify something as well as ask for more. hehehee

1. A part of my question is misunderstood by you. About the months and years, I meant to allow user to enter BOTH years and months instead of only one of them. What I'm thinking of is using listbox to allow user to choose the year and month so as to lessen the pain of more validation check? Do you understand? Can you pls help me with this??

2. I would like the program to be able to check that if a user leave a field blank, inform them to enter the data or put in zero.

3. If you don't mind, can you pls briefly explain to me on the part of "validate" function? Specially the part on dots++ and decs++. What's the differences betw them? Why do you have to use both?

I think that's all. Thanks alot for your precious help!! :)

Regards

0

IT ExpertCommented:
1. I have put 30 years and 11 months
2. Ok, no problem
3. The validation accepts 0-9 and fullstop. The dots++ makes sure there is only one decimal point and the decs++ starts counting after the first dot to make sure there are only 2 decimals so 0.55.66 is not valid and neither is 10.555

I will post the result in another comment - EE has some problems it seems

Michel
0

IT ExpertCommented:
<HTML>
<SCRIPT LANGUAGE="JavaScript"><!-- // cloak
/* Calculation script (c) 1998 Michel Plungjan michel@irt.org */
FatalError = false;
function calculate(theForm) {
var Sum = validate(theForm.Val1.value);
if (!FatalError) {
Sum+= validate(theForm.Val2.value);
if (!FatalError) {
Sum+= validate(theForm.Val3.value);
if (!FatalError) {
Sum+= validate(theForm.Val4.value);
if (!FatalError) {
Sum = Sum/100*0.5;
var Period = 0;
if (theForm.MPeriod.selectedIndex !=-1)
Period += (parseInt(theForm.MPeriod.options[theForm.MPeriod.selectedIndex].value)*12);
if (theForm.YPeriod.selectedIndex !=-1)
Period += parseInt(theForm.YPeriod.options[theForm.YPeriod.selectedIndex].value);
}
else theForm.Val4.focus();
}
else theForm.Val3.focus();
}
else theForm.Val2.focus();
}
else theForm.Val1.focus();
if (FatalError) theForm.Result.value = 'Sorry, cannot compute';
else theForm.Result.value = Sum*Period;
FatalError = false;
}

function validate(checkString) {
if (checkString == '') { alert('Please enter an amount or 0'); FatalError = true; return 0; }

newString = "";    // Revised/corrected string

for (var dots=0, decs=0, i=0, n=checkString.length; i < n; i++) {
ch = checkString.substring(i, i+1);
if ((ch >= "0" && ch <= "9") || (ch == ".")) {
newString += ch;
if (ch == '.') dots++; // more than one decimal point?
else if (dots==1) decs++; // more than 2 decimals after the decimal point?
}
}
if (checkString != newString) { alert('The value ' + checkString + 'you have entered\ncontains invalid characters,\nplease change'); FatalError = true; return 0; }
if (dots > 1) { alert('The value ' + checkString + ' contains too many decimal points'); FatalError = true; return 0; }
if (decs > 2) { alert('The value ' + checkString + ' contains too many decimals'); FatalError = true; return 0; }
return parseFloat(checkString);
}

// uncloak --></SCRIPT>
<FORM>
<TABLE>
<TR>
<TD>Value 1</TD><TD><INPUT TYPE="TEXT" NAME="Val1"></TD>
</TR>
<TR>
<TD>Value 2</TD><TD><INPUT TYPE="TEXT" NAME="Val2"></TD>
</TR>
<TR>
<TD>Value 3</TD><TD><INPUT TYPE="TEXT" NAME="Val3"></TD>
</TR>
<TR>
<TD>Value 4</TD><TD><INPUT TYPE="TEXT" NAME="Val4"></TD>
</TR>
<TR>
<TD>Period</TD>
<TD>
years <SELECT NAME="YPeriod">
<OPTION VALUE=0 SELECTED>0
<OPTION VALUE=1>1
<OPTION VALUE=2>2
<OPTION VALUE=3>3
<OPTION VALUE=4>4
<OPTION VALUE=5>5
<OPTION VALUE=6>6
<OPTION VALUE=7>7
<OPTION VALUE=8>8
<OPTION VALUE=9>9
<OPTION VALUE=10>10
<OPTION VALUE=11>11
<OPTION VALUE=12>12
<OPTION VALUE=13>13
<OPTION VALUE=14>14
<OPTION VALUE=15>15
<OPTION VALUE=16>16
<OPTION VALUE=17>17
<OPTION VALUE=18>18
<OPTION VALUE=19>19
<OPTION VALUE=20>20
<OPTION VALUE=21>21
<OPTION VALUE=22>22
<OPTION VALUE=23>23
<OPTION VALUE=24>24
<OPTION VALUE=25>25
<OPTION VALUE=26>26
<OPTION VALUE=27>27
<OPTION VALUE=28>28
<OPTION VALUE=29>29
<OPTION VALUE=30>30
</SELECT>
months <SELECT NAME="MPeriod">
<OPTION VALUE=0 SELECTED>0
<OPTION VALUE=1>1
<OPTION VALUE=2>2
<OPTION VALUE=3>3
<OPTION VALUE=4>4
<OPTION VALUE=5>5
<OPTION VALUE=6>6
<OPTION VALUE=7>7
<OPTION VALUE=8>8
<OPTION VALUE=9>9
<OPTION VALUE=10>10
<OPTION VALUE=11>11
</SELECT>
</TD>
</TR>
<TR>
<TD COLSPAN=2 ALIGN="CENTER"><INPUT TYPE="BUTTON" VALUE="Compute" onClick="calculate(this.form)"> <INPUT TYPE="RESET" VALUE="Reset"></TD>
</TR>
<TR>
<TD>Result</TD><TD><INPUT TYPE="TEXT" NAME="Result"></TD>
</TR>
</TABLE>

</HTML>

0

IT ExpertCommented:
Is this what you wanted?

Michel

0

Author Commented:
Hi Michel!

So sorry but there is some changes now. Rather than telling user that they MUST enter zero, now I want the program to put the zero into the fields without any prompt. Can you amend it for me??

Need to ask you something too...if there a way for the Script to take a value from a HTML file and then open another HTML file to put the value in?

That's all for the moment. So sorry to make so much changes. Don't worry I'll increase the points. :) Thank a million! :)
0

IT ExpertCommented:
Here is the amended script... I do not understand the second question...

<HTML>
<SCRIPT LANGUAGE="JavaScript"><!-- // cloak
/* Calculation script (c) 1998 Michel Plungjan michel@irt.org */
FatalError = false;
function calculate(theForm) {
var Sum = 0;
var TestVal = '';
TestVal = validate(theForm.Val1.value);
theForm.Val1.value = TestVal;
if (!FatalError) {
Sum+= TestVal;
TestVal = validate(theForm.Val2.value);
theForm.Val2.value = TestVal;
if (!FatalError) {
Sum+= TestVal;
TestVal = validate(theForm.Val3.value);
theForm.Val3.value = TestVal;
if (!FatalError) {
Sum+= TestVal;
TestVal = validate(theForm.Val4.value);
theForm.Val4.value = TestVal;
if (!FatalError) {
Sum+= TestVal;
Sum = Sum/100*0.5;
var Period = 0;
if (theForm.MPeriod.selectedIndex !=-1)
Period += parseInt(theForm.MPeriod.options[theForm.MPeriod.selectedIndex].value)*12);
if (theForm.YPeriod.selectedIndex !=-1)
Period += parseInt(theForm.YPeriod.options[theForm.YPeriod.selectedIndex].value);
}
else {
theForm.Val4.focus();
}
}
else {
theForm.Val3.focus();
}
}
else {
theForm.Val2.focus();
}
}
else {
theForm.Val1.focus();
}
if (FatalError) theForm.Result.value = 'Sorry, cannot compute';
else theForm.Result.value = Sum*Period;
FatalError = false;
}

function validate(checkString) {
if (!checkString) return 0;
newString = "";    // Revised/corrected string
for (var dots=0, decs=0, i=0, n=checkString.length; i < n; i++) {
ch = checkString.substring(i, i+1);
if ((ch >= "0" && ch <= "9") || (ch == ".")) {
newString += ch;
if (ch == '.') dots++; // more than one decimal point?
else if (dots==1) decs++; // more than 2 decimals after the decimal point?
}
}
if (checkString != newString) {
alert('The value ' + checkString + 'you have entered\ncontains invalid characters,\nI have changed it,\n please verify');
FatalError = true; return newString;
}
if (dots > 1) {
alert('The value ' + checkString + ' contains too many decimal points');
FatalError = true;
return checkString;
}
if (decs > 2) {
alert('The value ' + checkString + ' contains too many decimals');
FatalError = true;
checkString;
}

return parseFloat(checkString);
}

// uncloak --></SCRIPT>
<FORM NAME="CalcForm">
<TABLE>
<TR><TD>Value 1</TD><TD><INPUT TYPE="TEXT" NAME="Val1"></TD></TR>
<TR><TD>Value 2</TD><TD><INPUT TYPE="TEXT" NAME="Val2"></TD></TR>
<TR><TD>Value 3</TD><TD><INPUT TYPE="TEXT" NAME="Val3"></TD></TR>
<TR><TD>Value 4</TD><TD><INPUT TYPE="TEXT" NAME="Val4"></TD></TR>
<TR><TD>Period</TD>
<TD>years <SELECT NAME="YPeriod">
<OPTION VALUE=0 SELECTED>0
<OPTION VALUE=1>1
<OPTION VALUE=2>2
<OPTION VALUE=3>3
<OPTION VALUE=4>4
<OPTION VALUE=5>5
<OPTION VALUE=6>6
<OPTION VALUE=7>7
<OPTION VALUE=8>8
<OPTION VALUE=9>9
<OPTION VALUE=10>10
<OPTION VALUE=11>11
<OPTION VALUE=12>12
<OPTION VALUE=13>13
<OPTION VALUE=14>14
<OPTION VALUE=15>15
<OPTION VALUE=16>16
<OPTION VALUE=17>17
<OPTION VALUE=18>18
<OPTION VALUE=19>19
<OPTION VALUE=20>20
<OPTION VALUE=21>21
<OPTION VALUE=22>22
<OPTION VALUE=23>23
<OPTION VALUE=24>24
<OPTION VALUE=25>25
<OPTION VALUE=26>26
<OPTION VALUE=27>27
<OPTION VALUE=28>28
<OPTION VALUE=29>29
<OPTION VALUE=30>30
</SELECT>
months <SELECT NAME="MPeriod">
<OPTION VALUE=0 SELECTED>0
<OPTION VALUE=1>1
<OPTION VALUE=2>2
<OPTION VALUE=3>3
<OPTION VALUE=4>4
<OPTION VALUE=5>5
<OPTION VALUE=6>6
<OPTION VALUE=7>7
<OPTION VALUE=8>8
<OPTION VALUE=9>9
<OPTION VALUE=10>10
<OPTION VALUE=11>11
</SELECT>
</TD>
</TR>
<TR><TD COLSPAN=2 ALIGN="CENTER"><INPUT TYPE="BUTTON" VALUE="Compute"
onClick="calculate(this.form)"> <INPUT TYPE="RESET" VALUE="Reset"></TD>
</TR>
<TR><TD>Result</TD><TD><INPUT TYPE="TEXT" NAME="Result"></TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>

Michel
0

Author Commented:
I would like to provide a mechanism to allow a administrator to change the 0.5% value anytime WITHOUT having to go into the source file of the above HTML file due to security reason.

Thus I would like to create a HTML file to allow the administrator to key in the new value and then reflect the change in the above HTML file.

Is JavaScript able to do so? I would think that it's not possible. What's your opinion?

0

IT ExpertCommented:
1. for NS3+ and IE4+ a .js file can be used:

<HTML>
<SCRIPT LANGUAGE="JavaScript" SRC="percentage.js">
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript"><!-- // cloak
// here is the normal script

and percentage.js looks like this:
Percentage = 0.05;

then change the script you already have from
Sum = Sum/100*0.5;
to
Sum = Sum/100*Percentage;

If you want to have a more compatible script, why not just have the script look like this:

<HTML>
<SCRIPT LANGUAGE="JavaScript"><!-- // cloak
/* Calculation script (c) 1998 Michel Plungjan michel@irt.org */

/**************** Please only modify the following line *******************/
Percentage=0.05;
/**********************************************************************************/

FatalError = false;
function calculate(theForm) {
var Sum = 0;

It is not that much more 'dagerous' and it is a lot simpler..

Michel
0

IT ExpertCommented:

Michel
0

Author Commented:
thanx alot!
0

Author Commented:
Michel,

Do you have any idea how I can give you the remaining 360 points?? So sorry....I meant to increase your point to 400 put didn't realise that I've typed 40....

Pls, advice me what to do ok? I really wish to give you the points.
0

IT ExpertCommented:
Thanks for your concern! I did get 400 (and the A grade multiplied it by 4)
Once you have accepted the answer, it goes in the
Previously Answered Questions database (PAQ) and is available for 10% of the original value - here 40 points.

Thanks and don't worry :-)

Michel

PS:The Points you get when signing on and that are accumulated by being a member here are not the same kind of points awarded to the experts answering so the 1600 quality points I just got from you are expert points and go towards my next tshirt and keeps me #1 in the JS area but I cannot use them to ask questions.

0

Author Commented:
Phew....ok...i'm just too glad you got it :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.