SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot BTC's Avatar
    Join Date
    Jul 2010
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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?

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    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:

    Code javascript:
    var result = a * b * b / 800;

    Or, if you want to get fancy:


    Code javascript:
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot BTC's Avatar
    Join Date
    Jul 2010
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    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:

    Code javascript:
    var result = a * b * b / 800;

    Or, if you want to get fancy:


    Code javascript:
    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

  4. #4
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Location
    Oskarshamn, Sweden
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    I did this just for fun
    The form is unstyled (read: ugly), but should be working.
    Code:
    <!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>

  5. #5
    Non-Member
    Join Date
    Jan 2011
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!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>

  6. #6
    SitePoint Zealot BTC's Avatar
    Join Date
    Jul 2010
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow thank you so much for your help! This was very helpful!!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •