Givng Calc

by zimerhonzl

HTML

<form action="" id="calculator" onsubmit="return false;">&nbsp;
<table align="center" style="border:none;">
                <tbody>
                    <tr>
                        <td style="font-weight: bold;">Total anticipated support:</td>
                        <td>$&nbsp;<input id="support" name="support" oninput="getTotal()" type="text" /></td>
                    </tr>
                    <tr>
                        <td>Parent Organization (53.5%)</td>
                        <td>
                        <div id="parent" style="float: right;">&nbsp;</div>
                        </td>
                    </tr>
                    <tr>
                        <td>Supporting Partners (7.6%)</td>
                        <td>
                        <div id="partners" style="float: right;">&nbsp;</div>
                        </td>
                    </tr>
                    <tr>
                        <td>Programs &amp; Support (6.0%)</td>
                        <td>
                        <div id="programs" style="float: right;">&nbsp;</div>
                        </td>
                    </tr>
                    <tr>
                        <td>Staffing (25.5%)</td>
                        <td>
                        <div id="staff" style="float: right;">&nbsp;</div>
                        </td>
                    </tr>
                    <tr>
                        <td>Administration (7.4%)</td>
                        <td>
                        <div id="admin" style="float:right;">&nbsp;</div>
                        </td>
                    </tr>
                </tbody>
            </table>
</form>

JavaScript

function getSupport() {
    var theForm = document.forms["calculator"];
    var supportV = theForm.elements["support"];
    var indvSupport = 0;
    if(support.value != "") {
        indvSupport = parseInt(supportV.value);
    }
    return indvSupport;
}
function getTotal() {
    var indvSupport = getSupport();
    
    //set values
    var parentV = (indvSupport * 0.535).toFixed(2);
    var partnersV = (indvSupport * 0.0760).toFixed(2);
    var programsV = (indvSupport * 0.06).toFixed(2);
    var staffV = (indvSupport * 0.255).toFixed(2);
    var adminV = (indvSupport * 0.074).toFixed(2);
    
    //display result
    document.getElementById('parent').innerHTML = "$" + parentV;
    document.getElementById('partners').innerHTML = "$" + partnersV;
    document.getElementById('programs').innerHTML = "$" + programsV;
    document.getElementById('staff').innerHTML = "$" + staffV;
    document.getElementById('admin').innerHTML = "$" + adminV;
}