Solved

# Calculations

Posted on 1998-10-26
156 Views
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
Question by:Cantona
• 11
• 6

LVL 75

Accepted Solution

Michel Plungjan earned 400 total points
ID: 1272952
Can do. I will lock this until done...

Michel
0

LVL 75

Expert Comment

ID: 1272953
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

LVL 75

Expert Comment

ID: 1272954
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

LVL 75

Expert Comment

ID: 1272955
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 Comment

ID: 1272956
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

LVL 75

Expert Comment

ID: 1272957
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

LVL 75

Expert Comment

ID: 1272958
<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

LVL 75

Expert Comment

ID: 1272959
Is this what you wanted?

Michel

0

Author Comment

ID: 1272960
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

LVL 75

Expert Comment

ID: 1272961
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 Comment

ID: 1272962
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

LVL 75

Expert Comment

ID: 1272963
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

LVL 75

Expert Comment

ID: 1272964

Michel
0

Author Comment

ID: 1272965
thanx alot!
0

Author Comment

ID: 1272966
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

LVL 75

Expert Comment

ID: 1272967
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 Comment

ID: 1272968
Phew....ok...i'm just too glad you got it :)
0

## Featured Post

### Suggested Solutions

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single sâ€¦
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read bigâ€¦
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQueryâ€¦