Calculation script to display on same page

**BigDaddyLH** · Mar 6 '08, 02:50 PM

I guess the first thing to learn about the scripting language ECMAScript (sometimes called JavaScript) is that it is unrelated to the programming language Java. Moved to this forum...

--JAVA MODERATOR

**hsriat** · Mar 6 '08, 03:15 PM

Originally posted by mrking

Hi,

First time in the Java section here.

I have an HTML form and a PHP script to do a simple calculation but it has to take me to a different page for the results.

The calculator is really simple. The user enters just height and width and the calculator applies the formula, then display the answer to the nearest 10th.

[PHP]
<?

$cost=((($_REQU EST["height"]*$_REQUEST["width"])+160)*1.65);

echo "<br />The cost of the commission will be $" .round($cost, -1);

?>
[/PHP]

I know nothing of Java script. Can someone point me in the right direction for a script that will do this calculation and display it on the same page as the user inputs the data?

Thank you!!

Michael

Yeah, that can be done easily. Have a look at
how to set and return value of an input element.
Use Math.round(vari able) to round the number.

This is another example.

**mrking** · Mar 6 '08, 04:42 PM

Thanks for the info...

This is my start, but there is a lot wrong with it of course.

I have no idea how to start a calculator function so far. Still digging. help would be a godsend. :)

Code:

<html>
<head>
<script type="text/javascript">


function createCost()
{
alert(document.getElementById("h1").value);
alert(document.getElementById("w1").value);
}
</script>
</head>
<body>

<form>
Height: <input type="text" size="4" id="h1" value="" />
Width: <input type="text" size="4" id="w2" value="" />
<input type="button" id="button1" onclick="createCost()" value="Calculate Cost" />

<br /><br />
<input type="text" id="h1" size="50">
</form>



</body>
</html>

**hsriat** · Mar 6 '08, 04:53 PM

[code=javascript]function createCost() {
//alert() is to give an alert message, save the values as variables instead.
var h = parseInt(docume nt.getElementBy Id("h1").value) ;
var w = parseInt(docume nt.getElementBy Id("w1").value) ;
//parseInt() is used to use the values later on as integers and not strings.
//coz in js, + is mainly used to join strings like . in PHP

//do your calculations like u do in PHP
var c = h+w;

//set the value in the input field
document.getEle mentById("c").v alue = c;
}[/code][html]<form>
Height: <input type="text" size="4" id="h1" value="" />
Width: <input type="text" size="4" id="w2" value="" />

Cost: <input type="text" size="4" id="c" value="" readonly />
<input type="button" id="button1" onclick="create Cost()" value="Calculat e Cost" />

<br /><br />

</form>[/html]

**mrking** · Mar 6 '08, 05:17 PM

Thanks! I would have never got to that. Once I see it written it makes sense.

I use math.round and it will round up to the nearest integer, but I am looking to round up to the nearest 10th.

So, 491=500; 348=350... etc.

Is there an easy way to do this?

Code:

<html>

<head>
<script type="text/javascript">

function createCost() {
//alert() is to give an alert message, save the values as variables instead.

var h = document.getElementById("h1").value;
var w = document.getElementById("w1").value;

//do your calculations like u do in PHP
  
var c = (((h*w)+160)*1.65);
c = Math.round(c);

 
       //set the value in the input field

document.getElementById("c").value = c;
      }
</script>
</head>

<body>
      <form>

      Height: <input type="text" size="4" id="h1" value="" />

      Width: <input type="text" size="4" id="w1" value="" />

      <!-- input to display cost-->

    Cost: <input type="text" size="4" id="c" value="" readonly />

      <input type="button" id="button1" onclick="createCost()" value="Calculate Cost" />

       
      <br /><br />

      <!-- //do not repeat id

      <input type="text" id="h1" size="50">


      -->

      </form>
</body>
</html>

**hsriat** · Mar 6 '08, 05:32 PM

I guess may be there is nothing like round($x, 2) in JS.

So you can do one thing. Divide your number with 10, do Math.round() and multiply by 10 again.
May be that can work.

Like:

Code:

c = (Math.round(c/10))*10;

**mrking** · Mar 6 '08, 05:48 PM

Originally posted by hsriat

I guess may be there is nothing like round($x, 2) in JS.

So you can do one thing. Divide your number with 10, do Math.round() and multiply by 10 again.
May be that can work.

Like:

Code:

c = (Math.round(c/10))*10;

HA, BINGO.

You're the best!!!

Thank you for all your help and code writing. You saved me days working this out.

Cheers,

Michael

**hsriat** · Mar 6 '08, 06:49 PM

Originally posted by mrking

HA, BINGO.

You're the best!!!

Thank you for all your help and code writing. You saved me days working this out.

Cheers,

Michael

Too glad to know you got it working. Post here for any other problem.

Harpreet

**mrking** · Mar 6 '08, 08:48 PM

I have one more afterthought addition I would like to add.

I would like to give the option of "inches" or "Centimeter s: to provide the values they are entering

I think it can be done with radio boxes and depending on the radio box ticked it will perform a different calculation. Correct?

Oh, and is there anyway to hide the formula from the general public. If you decide to look at the page source you will be able to see it. I'd like to not show that part if possible.

**hsriat** · Mar 7 '08, 06:08 AM

Originally posted by mrking

I have one more afterthought addition I would like to add.

I would like to give the option of "inches" or "Centimeter s: to provide the values they are entering

I think it can be done with radio boxes and depending on the radio box ticked it will perform a different calculation. Correct?

Yeah that can be done.

Originally posted by mrking

Oh, and is there anyway to hide the formula from the general public. If you decide to look at the page source you will be able to see it. I'd like to not show that part if possible.

No, that's not possible. Only you can save the javascript in an external file. But that too is not hidden. Only you won't see the code on view source.

**mrking** · Mar 7 '08, 04:50 PM

Thanks, the external file worked great. :)

I can get the radio buttons in the form no problem and have the new calculation for the centimeter option but how do i tell which one to use.

Code:

<input type="radio" name="inches" onclick="check(this.value)" value="units">Inches<br />
<input type="radio" name="cm" onclick="check(this.value)" value="units">Centimeters<br />

Are there IF statements in JS for this? Do I need to loop it like in PHP?

It's like I am learning Greek here. :)

I am sure I need to use something like this:

Code:

  document.getElementById("answer").value=units;

Calculation script to display on same page

Calculation script to display on same page

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment