Math Formula Input Form

I want to create a mathematical formula plugin for my website where users will enter their own numbers based on the formula in an html form style.

The formula is (a)*(b)^2/800

I want their to be a box for users to submit their data which will be (a) & (b) and then a box below showing the calculation. Also buttons giving the users the option to “calculate” and “clear fields”.

Is there a website where I could input the formula and they could generate the coding?

No, there are no sites that accept a formula and provide you code that you can embed within your own web site to perform the calculation.

There is though some simple code that can allow such calculations to occur.
For example, the javascript code to perform the calculation is:


var result = a * b * b / 800;

Or, if you want to get fancy:


var result = a * Math.pow(b, 2) / 800;

That’s not where your problem lie. The real problems are in connecting together an HTML form so that scripting code can process the values, and then pass them back to an appropriate location on the page.

I really don’t have much experience with Java, but here is an example of what I am looking to make. Its the first one labeled “General Fish Weight Calculator”

http://www.myoan.net/fishing/weight_calc.html

I did this just for fun :slight_smile:
The form is unstyled (read: ugly), but should be working.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Fish Weight Calculator</title>
</head>

<body>
<form id="fishWeight" action="">
<fieldset>
	<legend>Fish Weight Calculator</legend>
	<p>
		<label for="length">Length (in)</label>
		<input id="length" name="length" type="number" />
	</p>
	<p>
		<label for="girth">Girth (in)</label>
		<input id="girth" name="girth" type="number" />
	</p>
	<p>
		<input type="submit" value="Calculate weight" />
		or
		<input type="reset" value="Reset" />
	</p>
	<p>
		<label for="weight">Weight (lbs)</label>
		<input id="weight" name="weight" type="number" />
	</p>
</fieldset>
</form>

<script>
(function () {
	function calculateFishWeight(length, girth) {
		length = parseFloat(length);
		girth = parseFloat(girth);
		return (length * girth * girth / 800);
	}

	var fishWeight = document.getElementById("fishWeight");
	if (fishWeight) {
		fishWeight.onsubmit = function () {
			this.weight.value = calculateFishWeight(this.length.value, this.girth.value);
			return false;
		};
	}
}());
</script>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">
            window.onload=function() {
                lengthObj = document.getElementById('txtLength');
                girthObj = document.getElementById('txtGirth');
                weightObj = document.getElementById('tdWeight');
                document.getElementById('btnReset').onclick = resetInputs;
                document.getElementById('btnCalc').onclick = calcWeight;
            }
            function resetInputs() {
                lengthObj.value = '';
                girthObj.value = '';
                weightObj.innerHTML = '';
            }
            function calcWeight() {
                var length = new Number(lengthObj.value);
                var girth = new Number(girthObj.value);
                weightObj.innerHTML = '';
                if(isNaN(length) || isNaN(girth)) {
                    alert('Invalid length or girth');
                    return;
                }
                weightObj.innerHTML = length*Math.pow(girth,2)/800;
            }
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td><label for="txtLength">Length (inches)</label></td>
                <td><input type="text" id="txtLength" /></td>
            </tr>
            <tr>
                <td><label for="txtGirth">Girth (inches)</label></td>
                <td><input type="text" id="txtGirth" /></td>
            </tr>
            <tr>
                <td>Weight</td>
                <td id="tdWeight"></td>
            </tr>
            <tr>
                <td></td>
                <td><button id="btnReset">Reset</button><button id="btnCalc">Calculate</button></td>
            </tr>
        </table>
    </body>
</html>

Wow thank you so much for your help! This was very helpful!! :slight_smile: