Need calculator function to return result back to own page

I need to include a very simple calculator on a page in a joomla client site. Client wants to be able to update rates attached to the calculator and I’m not having them use ftp. Is there a way to insert a small form, have users use the calculator, and have the calculator return the result to the page for the user to see?

I have an html form on the page. I tried building the calculator in php, then realized I need something client side. So I’m looking at javascript calc functions now. However, I don’t know how to get the js to return the result to the page. I’m just beginning my web development/programming career so this is a new aspect for me. Do I use AJAX for this? I’ve been reading about all this for two days and am getting confused. Do I return the result to an html label? I’ve not returned a result back to a form before. Any input would be greatly appreciated.

A quick search of GOOGLE returns a few very useful things like
this
this
this

Thanks, but I need a custom calculator. I’m pretty sure I’ll have to write it myself due to the nature of it. I need users to be able to calculate how much water they’ll need to fill their swimming pool. This can be done either from their tap, or from a fire hydrant. The rates from the two different sources are different. I’ve never written javascript, so that’s what I’ve been researching.

I have a label and one textbox for how many gallons a swimming pool requires. I also have a hidden textbox with the static rate from a user’s tap. I have a ‘Calculate’ button and a ‘Clear’ button. Of course, the form was easy. I’m struggling with the javascript and how to call it in the form.

One technique I have seen is to use innerHTML.

On the HTML page on which you want the results output, you define a span and give it a name. In this example, the span is named “output”:


<span id="output">
</span>

You could even put this span in a table.

Then, in the Javascript code, once the results have been computed, output the results to this span field by using a statement like the following:


document.getElementById('output').innerHTML = outputString;

(In this case, the output is a string variable named “outputString”.)

A coworker rewrote this for me in php and it works fine, in WAMP serving up an IE page. Trying to get the php to work in Joomla is another thing. Still working on that. Is there a way to mark this thread solved?