jQuery / Javascript净工资计算器(jQuery/Javascript net salary calculator)

jQuery / Javascript净工资计算器(jQuery/Javascript net salary 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; }

I've been working on this net salary calculator and everything seems to make sense as far as I can tell, yet the submit button doesn't seem to do anything it is supposed to.

I'm not sure if there's anything I missed or any mistake I made somewhere that I just can't seem to find but any help would be great!

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

最满意答案

请检查它是固定的：

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

Please check it is fixed at:

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