In this lesson, we'll add some code to fine-tune the 'State Exemptions' label. Some states may use different terminology for this field, which we'd like to reflect in our form.
In addition, if the state has specific instructions for what goes into this field, we'll show that as title (tooltip) text for the input element.
document.addEventListener("DOMContentLoaded", function() {
loadStates();
});
function compute() {
var earnings = getFloat('earnings');
var filingstatus = getInt('filingstatus');
var payperiods = getInt('payperiods');
getFederal(earnings, filingstatus, payperiods);
}
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 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", "");
updateExemptionsLabel(tax_props);
}
} else {
alert(response.value);
}
});
}
function updateExemptionsLabel(tax_props) {
var lbl = document.getElementById("state_exemptions_label");
var input = document.getElementById("state_exemptions");
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);
}
}
function getProperties(taxname, 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;
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;
}
}
There's an addition to the updateStateDiv function, which calls the new function updateExemptionsLabel when the state has a tax.
updateExemptionsLabel uses two tax properties for the selected state:
'stateexemptions_tag' - short text intended as a label for the state exemptions field, and
'stateexemptions_instructions' - specific instructions for the state exemption field.
The label and title are updated dynamically using these values.