Finally we have enough information to compute state withholding! We'll add an element for the results, and some code for the calculation.
This adds the out_state element to the output area. We'll compute the state tax, placing the result here.
document.addEventListener("DOMContentLoaded", function() { loadStates(); }); function compute() { var earnings = getFloat('earnings'); var filingstatus = getInt('filingstatus'); var payperiods = getInt('payperiods'); getFederal(earnings, filingstatus, payperiods); var state = document.getElementById('state').value; var state_exemptions = getInt('state_exemptions'); var state_misc = getFloat('state_miscellaneous'); var state_aux = getFloat('state_auxiliary'); getState(earnings, filingstatus, payperiods, state, state_exemptions, state_misc, state_aux); } function getFederal(earnings, filingstatus, payperiods) { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4) { let res = JSON.parse(this.responseText); if (res.status == "ok") { var out_federal = document.getElementById('out_federal'); out_federal.value = res.value.toFixed(2); } } }; var uri = "http://localhost:8000/taxamount/federal income tax" + "?earnings=" + earnings.toString() + "&filingstatus=" + filingstatus.toString() + "&payperiods=" + payperiods.toString(); xhttp.open("GET", uri, true); xhttp.send(); } function getState(earnings, filingstatus, payperiods, state, exemptions, miscellaneous, auxiliary) { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4) { let res = JSON.parse(this.responseText); if (res.status == "ok") { var out_state = document.getElementById('out_state'); out_state.value = res.value.toFixed(2); } } }; var uri = "http://localhost:8000/taxamount/" + state + "?earnings=" + earnings.toString() + "&filingstatus=" + filingstatus.toString() + "&payperiods=" + payperiods.toString() + "&stateexemptions=" + exemptions.toString() + "&miscellaneous=" + miscellaneous.toString() + "&auxiliary=" + auxiliary.toString(); xhttp.open("GET", uri, true); xhttp.send(); } function loadStates() { var select = document.getElementById('state'); var states = [["AL", "Alabama"], ["AK", "Alaska"], ["AZ", "Arizona"], ["AR", "Arkansas"], ["CA", "California"], ["CO", "Colorado"], ["CT", "Connecticut"], ["DE", "Delaware"], ["FL", "Florida"], ["GA", "Georgia"], ["HI", "Hawaii"], ["ID", "Idaho"], ["IL", "Illinois"], ["IN", "Indiana"], ["IA", "Iowa"], ["KS", "Kansas"], ["KY", "Kentucky"], ["LA", "Louisiana"], ["ME", "Maine"], ["MD", "Maryland"], ["MA", "Massachusetts"], ["MI", "Michigan"], ["MN", "Minnesota"], ["MS", "Mississippi"], ["MO", "Missouri"], ["MT", "Montana"], ["NE", "Nebraska"], ["NV", "Nevada"], ["NH", "New Hampshire"], ["NJ", "New Jersey"], ["NM", "New Mexico"], ["NY", "New York"], ["NC", "North Carolina"], ["ND", "North Dakota"], ["OH", "Ohio"], ["OK", "Oklahoma"], ["OR", "Oregon"], ["PA", "Pennsylvania"], ["RI", "Rhode Island"], ["SC", "South Carolina"], ["SD", "South Dakota"], ["TN", "Tennessee"], ["TX", "Texas"], ["UT", "Utah"], ["VT", "Vermont"], ["VA", "Virginia"], ["WA", "Washington"], ["WV", "West Virginia"], ["WI", "Wisconsin"], ["WY", "Wyoming"]]; states.forEach(function(state) { var option = document.createElement('option'); option.setAttribute('value', state[0]); option.appendChild(document.createTextNode(state[1])); select.appendChild(option); }); select.addEventListener("change", function() { updateStateDiv(select); }); updateStateDiv(select); } function updateStateDiv(state_select) { var div = document.getElementById("state_div"); getProperties(state_select.value, function (response) { if (response.status == "ok") { var tax_props = response.value; var div = document.getElementById("state_div"); if (!tax_props.has_tax) { div.style.display = "none"; state_select.setAttribute("title", "No state tax"); } else { div.style.display = "block"; state_select.setAttribute("title", ""); updateStateInput(tax_props); } } else { alert(response.value); } }); } function updateStateInput(tax_props) { var lbl = document.getElementById("state_exemptions_label"); var input = document.getElementById("state_exemptions"); var misc_div = document.getElementById("state_miscellaneous_div"); var misc_lbl = document.getElementById("state_miscellaneous_label"); var misc = document.getElementById("state_miscellaneous"); var aux_div = document.getElementById("state_auxiliary_div"); var aux_lbl = document.getElementById("state_auxiliary_label"); var aux = document.getElementById("state_auxiliary"); if (tax_props.stateexemptions_tag == ""){ lbl.innerHTML = "State Exemptions:"; } else { lbl.innerHTML = "State " + tax_props.stateexemptions_tag + ":"; } if (tax_props.stateexemptions_instructions == ""){ input.setAttribute("title", ""); } else { input.setAttribute("title", tax_props.stateexemptions_instructions); } if (tax_props.miscellaneous_tag == ""){ misc_div.style.display = "none"; } else { misc_div.style.display = "block"; misc_lbl.innerHTML = tax_props.miscellaneous_tag + ":"; } if (tax_props.miscellaneous_instructions == ""){ misc.setAttribute("title", ""); } else { misc.setAttribute("title", tax_props.miscellaneous_instructions); } if (tax_props.auxiliary_tag == ""){ aux_div.style.display = "none"; } else { aux_div.style.display = "block"; aux_lbl.innerHTML = tax_props.auxiliary_tag + ":"; } if (tax_props.auxiliary_instructions == ""){ aux.setAttribute("title", ""); } else { aux.setAttribute("title", tax_props.auxiliary_instructions); } } function getProperty(taxname, property, callback) { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4) { let res = JSON.parse(this.responseText); callback(res); } }; var uri = "http://localhost:8000/tax/" + taxname + "?field=" + property; xhttp.open("GET", uri, true); xhttp.send(); } function getFloat(id) { var elem = document.getElementById(id).value; var f = parseFloat(elem); if (isNaN(f)) { return 0.00; } else { return f; } } function getInt(id) { var elem = document.getElementById(id).value; var f = parseInt(elem); if (Number.isInteger(f)) { return f; } else { return 0; } }
document.addEventListener("DOMContentLoaded", function() {
loadStates();
});
function compute() {
var earnings = getFloat('earnings');
var filingstatus = getInt('filingstatus');
var payperiods = getInt('payperiods');
getFederal(earnings, filingstatus, payperiods);
var state = document.getElementById('state').value;
var state_exemptions = getInt('state_exemptions');
var state_misc = getFloat('state_miscellaneous');
var state_aux = getFloat('state_auxiliary');
getState(earnings, filingstatus, payperiods, state,
state_exemptions, state_misc, state_aux);
}
function getFederal(earnings, filingstatus, payperiods) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
let res = JSON.parse(this.responseText);
if (res.status == "ok") {
var out_federal = document.getElementById('out_federal');
out_federal.value = res.value.toFixed(2);
};
var uri = "http://localhost:8000/taxamount/federal income tax"
+ "?earnings=" + earnings.toString()
+ "&filingstatus=" + filingstatus.toString()
+ "&payperiods=" + payperiods.toString();
xhttp.open("GET", uri, true);
xhttp.send();
function getState(earnings, filingstatus, payperiods, state, exemptions,
miscellaneous, auxiliary) {
var out_state = document.getElementById('out_state');
out_state.value = res.value.toFixed(2);
var uri = "http://localhost:8000/taxamount/" + state
+ "&payperiods=" + payperiods.toString()
+ "&stateexemptions=" + exemptions.toString()
+ "&miscellaneous=" + miscellaneous.toString()
+ "&auxiliary=" + auxiliary.toString();
function loadStates() {
var select = document.getElementById('state');
var states = [["AL", "Alabama"], ["AK", "Alaska"], ["AZ", "Arizona"],
["AR", "Arkansas"], ["CA", "California"], ["CO", "Colorado"],
["CT", "Connecticut"], ["DE", "Delaware"], ["FL", "Florida"],
["GA", "Georgia"], ["HI", "Hawaii"], ["ID", "Idaho"],
["IL", "Illinois"], ["IN", "Indiana"], ["IA", "Iowa"],
["KS", "Kansas"], ["KY", "Kentucky"], ["LA", "Louisiana"],
["ME", "Maine"], ["MD", "Maryland"], ["MA", "Massachusetts"],
["MI", "Michigan"], ["MN", "Minnesota"], ["MS", "Mississippi"],
["MO", "Missouri"], ["MT", "Montana"], ["NE", "Nebraska"],
["NV", "Nevada"], ["NH", "New Hampshire"], ["NJ", "New Jersey"],
["NM", "New Mexico"], ["NY", "New York"], ["NC", "North Carolina"],
["ND", "North Dakota"], ["OH", "Ohio"], ["OK", "Oklahoma"],
["OR", "Oregon"], ["PA", "Pennsylvania"], ["RI", "Rhode Island"],
["SC", "South Carolina"], ["SD", "South Dakota"],
["TN", "Tennessee"], ["TX", "Texas"], ["UT", "Utah"],
["VT", "Vermont"], ["VA", "Virginia"], ["WA", "Washington"],
["WV", "West Virginia"], ["WI", "Wisconsin"], ["WY", "Wyoming"]];
states.forEach(function(state) {
var option = document.createElement('option');
option.setAttribute('value', state[0]);
option.appendChild(document.createTextNode(state[1]));
select.appendChild(option);
select.addEventListener("change", function() {
updateStateDiv(select);
function updateStateDiv(state_select) {
var div = document.getElementById("state_div");
getProperties(state_select.value, function (response) {
if (response.status == "ok") {
var tax_props = response.value;
if (!tax_props.has_tax) {
div.style.display = "none";
state_select.setAttribute("title", "No state tax");
} else {
div.style.display = "block";
state_select.setAttribute("title", "");
updateStateInput(tax_props);
alert(response.value);
function updateStateInput(tax_props) {
var lbl = document.getElementById("state_exemptions_label");
var input = document.getElementById("state_exemptions");
var misc_div = document.getElementById("state_miscellaneous_div");
var misc_lbl = document.getElementById("state_miscellaneous_label");
var misc = document.getElementById("state_miscellaneous");
var aux_div = document.getElementById("state_auxiliary_div");
var aux_lbl = document.getElementById("state_auxiliary_label");
var aux = document.getElementById("state_auxiliary");
if (tax_props.stateexemptions_tag == ""){
lbl.innerHTML = "State Exemptions:";
lbl.innerHTML = "State " + tax_props.stateexemptions_tag + ":";
if (tax_props.stateexemptions_instructions == ""){
input.setAttribute("title", "");
input.setAttribute("title", tax_props.stateexemptions_instructions);
if (tax_props.miscellaneous_tag == ""){
misc_div.style.display = "none";
misc_div.style.display = "block";
misc_lbl.innerHTML = tax_props.miscellaneous_tag + ":";
if (tax_props.miscellaneous_instructions == ""){
misc.setAttribute("title", "");
misc.setAttribute("title", tax_props.miscellaneous_instructions);
if (tax_props.auxiliary_tag == ""){
aux_div.style.display = "none";
aux_div.style.display = "block";
aux_lbl.innerHTML = tax_props.auxiliary_tag + ":";
if (tax_props.auxiliary_instructions == ""){
aux.setAttribute("title", "");
aux.setAttribute("title", tax_props.auxiliary_instructions);
function getProperty(taxname, property, callback) {
callback(res);
var uri = "http://localhost:8000/tax/" + taxname
+ "?field=" + property;
function getFloat(id) {
var elem = document.getElementById(id).value;
var f = parseFloat(elem);
if (isNaN(f)) {
return 0.00;
return f;
function getInt(id) {
var f = parseInt(elem);
if (Number.isInteger(f)) {
return 0;
Click 'compute' below to calculate both Federal and State withholding.