Simple javascript, multiplying variables and displaying in alert box

**Oli-G** · August 10th, 2005, 10:03 AM

Gawd... cant believe im asking this. I can understand and explan code in front of me just fine, but its writing it thats the pain!

I have a form with three text boxes.

One text box is for the user to insert a length value (numerical)

One text box is for the user to insert a height value (numerical)

One box is for the user to select a price (numerical)

When we process the form, I just need to display an alert box that multiplies the two values from the first 2 text boxes, adds 25% of that to the figure, and then multiplies that final figure by what was entered in the third text box.

So ie, in the alert box: "The total area is '(length)*(width)*25%+"and the cost is '((length)*(width)*25%*)*(cost)"

Totally off, but i think it helps illustrate what i need. Nothin too complex.

Dead easy really, but I just dont know the proper syntax!

Anyone able to shed some light for me?

**Ankou** · August 11th, 2005, 01:33 AM

Here's a working example of what I think you're looking for.

I put in the check to make sure that the numbers being input are actually numbers (you can include a decimal place - so 1.25 is accepted, but something like 1r or 1.3d wouldn't be).

You had mentioned price as well... I wasn't sure if you wanted that final value to be rounded to two decimal places or not. The commented out line (showValue = Math.round(showValue * 100) / 100; ) would actually round the final value to two decimal places if you wanted it. So instead of seeing something like 153.125 you would se 153.13.

Anyway here's the code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 <head>
  <title> </title>
  <script type="text/javascript">
	function only_numbers(value){
	  var check_this = value;
	  var expression = /^\d*\.*\d*$/;
	  if(expression.test(check_this)){ return true; }
	  else{ return false; }
	}
	function calculate(){
	 var lengthVal = document.mult.lengthVal.value;
	 var heightVal = document.mult.heightVal.value;
	 var priceVal = document.mult.priceVal.value
	 var showValue = 0;

	 if(only_numbers(lengthVal) && only_numbers(heightVal) && only_numbers(priceVal)){
	   var showValue = ((lengthVal * heightVal) * 1.25) * priceVal;
//	   showValue = Math.round(showValue * 100) / 100;
	   alert(showValue);
	 }else{
	   alert("Please enter only numerical values.");
	 }

	}
  </script>
 </head>
 <body>
 <form name="mult">
  Length: <input type="text" name="lengthVal" /> <br />
  Height: <input type="text" name="heightVal" /> <br />
  Price: <input type="text" name="priceVal" /> <br />
  <input type="button" value="Calculate" onclick="calculate()" />
 </body>
</html>

**Oli-G** · August 11th, 2005, 02:13 AM

Youre a legend, it works perfect, cheers!

Just one thing though, im wondering if it can be simplified further; ie removing all error detection, etc?

I did some today before I saw this, but cant seem to get it to click!

HTML Code:

<script=language="javascript" type="text/javascript">
     
<!--


function carpetCost(){

A = document.carpet.widthBox.value
B = document.carpet.lengthBox.value

A = Number(A)
B = Number(B)
C = (A+B)

document.carpet.totalBox.value = C

}


-->

</script>

So eventually I would get an alert box to display the value of C, which will contain an equation that multiplies A and B, adds 25% etc. Any thoughts? Will also be a lot easier to explain.

**Ankou** · August 11th, 2005, 04:12 PM

Yeah it could be simplified and you could remove the error checking if you'd like. Of course I think it depends on where it's going to be used. If this is for some carpet website where users can input the information to get an idea for price - then I'd leave the error checking in there.

So eventually I would get an alert box to display the value of C, which will contain an equation that multiplies A and B, adds 25% etc. Any thoughts? Will also be a lot easier to explain

Not sure I follow what you're looking for here. Your code shows C to be the values A + B -- which would be the length of the carpet plus the width of the carpet. (Aren't you looking for the area of the carpet here so really C = A*B? Or am I missing something?)

If you can explain it a little better for me I can help ya out so the code is what you're looking for.

**Oli-G** · August 11th, 2005, 06:08 PM

Yeah youre right, C = A*B, but I needed an extra 25% added to the total figure. This is something a friend is working on, so theres no stress, if it was a client job i'd be sticking with the design and palming off the code to someone else!

But I ended up with this, which seems to work:

HTML Code:

function carpetCost(){
A = document.carpet.widthBox.value
B = document.carpet.lengthBox.value

A = Number(A)
B = Number(B)
C = (A+B)

//document.carpet.totalBox.value = C

var area=A*B*1.25;
var cost=Number(document.carpet.costBox.value);
alert("The total area is "+area+" and the cost is "+(area*cost));
}

Thanks for your time, we may even end up mixing the two, or i'll see how he is with digesting the code you provided, as its much better/more flexible.

**outriggerkai** · November 27th, 2007, 03:58 PM

Dude, why don't you just be honest and say you need help with your homework? You don't have to make up some story about trying to help someone else. Geez!

I'm working on the same homework assignment you are doing...from the third edition of JavaScript by Don Gosselin. It's Case Project 3-4 Carpet Cost.
Thanks for all the help..