jQuery / Javascript净工资计算器

Question

我一直在使用这个净薪水计算器，据我所知，一切似乎都很合理，但是“提交”按钮似乎并没有执行应有的功能。

我不确定是否遗漏了任何东西或我在某个地方似乎找不到的任何错误，但是任何帮助都会很棒！

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;
}

Answer 1

请检查它是否固定在：

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;
});