jQuery / Javascript净工资计算器

时间:2014-09-14 05:17:50

标签: javascript jquery calculator

我一直在研究这个净工资计算器,据我所知,一切似乎都有意义,但提交按钮似乎没有做任何应该做的事情。

我不确定是否有我错过的任何错误,或者我在某个地方发现的任何错误,我似乎无法找到,但任何帮助都会很棒!

http://jsfiddle.net/Shibi/rcpfm4e2/

<div id="page-wrap">
<div id="todo" ng-controller="TodoCtrl">
        <h2>Net Salary Calculator</h2>

    <div class="form-horizontal">
        <form id="calculator">
            <p>Income:
                <input id="income" />
            </p>
            <select id="states" onchange="changetax(this)">
                <option>Choose state</option>
                <option value="4.0">Alabama</option>
                <option value="0.0">Alaska</option>
                <option value="5.60">Arizona</option>
                <option value="6.50">Arkansas</option>
            </select>
            <div id="tax"></div>
            <hr />
            <p>Taxed Amount:
                <input id="tax" disabled="disabled" />
            </p>
            <p>Total:
                <input id="total" disabled="disabled" />
            </p>
            <p>
                <input type="submit" />
            </p>
        </form>
    </div>
</div>

function changetax($this) {

var e = document.getElementById("states");
var selectedState = e.options[e.selectedIndex].text;
var x = document.getElementById("states");
var selectedTax = x.options[x.selectedIndex].value;
$("#tax").text($this.value ? ("Income Tax: " + selectedState + " " + selectedTax + "%") : "");
}

function calculate() {

var income = $('#income').val();
var tax = Number(income) * Number(selectedTax / 100);
var total = Number(income) - (Number(tax) * Number(income));

$('#tax').val(tax.toFixed(2));
$('#total').val(total.toFixed(2));
$('#calculator').submit(calculate);
return false;
}

1 个答案:

答案 0 :(得分:0)

请检查它是否已修复:

http://jsfiddle.net/rcpfm4e2/1/

<div id="page-wrap">
    <div id="todo" ng-controller="TodoCtrl">
            <h2>Net Salary Calculator</h2>

        <div class="form-horizontal">
            <form id="calculator">
                <p>Income:
                    <input id="income" />
                </p>
                <select id="states" onchange="changetax(this)">
                    <option>Choose state</option>
                    <option value="4.0">Alabama</option>
                    <option value="0.0">Alaska</option>
                    <option value="5.60">Arizona</option>
                    <option value="6.50">Arkansas</option>
                </select>
                <div id="taxSummary"></div>
                <hr />
                <p>Taxed Amount:
                    <input id="tax" disabled="disabled" />
                </p>
                <p>Total:
                    <input id="total" disabled="disabled" />
                </p>
                <p>
                    <input type="button" id="calculateBtn" value="Calculate"/>
                </p>
            </form>
        </div>
    </div>
</div>


$('#states').on('change', function () {

    var selectedStateText = $("#states :selected").text();
    var selectedStateValue = $("#states").val();

    $("#taxSummary").text(selectedStateValue ? ("Income Tax: " + selectedStateText + " " + selectedStateValue + "%") : "");
});


$("#calculateBtn").on('click', function() {

    var taxValue = $("#states").val();
    var income = $('#income').val();
    var tax = Number(income) * Number(taxValue / 100);
    var total = Number(income) - (Number(tax));

    $('#tax').val(tax.toFixed(2));
    $('#total').val(total.toFixed(2));
    //$('#calculator').submit(calculate);
    return false;
});