Tutorial

Tutorial: State Input

In this step, we'll add some fields to get input we'll need for calculating state withholding.

index.html:

<!DOCTYPE html> <html> <body> <form> <label for="earnings">Earnings:</label> <br> <input type="text" value="1000.00" id="earnings"> <br> <label for="payperiod">Pay Period:</label> <br> <select id="payperiods"> <option value="1">Yearly</option> <option value="4">Quarterly</option> <option value="12">Monthly</option> <option value="24">2x monthly</option> <option value="26">Bi-weekly</option> <option value="52" selected="selected">Weekly</option> <option value="260">Daily</option> </select> <br> <label for="filingstatus">Filing Status:</label> <br> <select id="filingstatus"> <option value="0" selected="selected">Single</option> <option value="1">Head of Household</option> <option value="2">Qualified Widow(er)</option> <option value="3">Married Filing Jointly</option> <option value="4">Married Filing Separately</option> <option value="5">Married Both Employed</option> </select> <br> <label for="state">State:</label> <br> <select id="state"></select> <br> <div id="state_div"> <label for="state_exemptions">State Exemptions:</label> <br> <input type="text" value="0" id="state_exemptions"> <br> </div> <button onclick="compute(); return false;">Compute</button> <hr> <h5>Output</h5> <br> <label for="out_federal">Federal:</label> <br> <input type="text" id="out_federal" value="0.00" disabled> </form> </body> <script> : (Javascript goes here) </script> </html>

We've added a state_div section to the input, which for now includes a single state_exemptions input element.

Not all states have a payroll tax, though. We're going to add some logic which displays state_div for states which actually have a tax.

Javascript:

	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) { 
		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", ""); 
				} 
			} else { 
				alert(response.value); 
			} 
		}); 
	}  
	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;
		}
	}

Here are two new functions:

getProperties - a helper function for fetching tax properties from TaxServer, and
updateStateDiv - a function which displays or hides the state_div section based on whether TaxServer says the state has a tax.

We've added some code to loadStates to call updateStateDiv whenever the state selection changes. We also call the function initially to make sure the form is in sync with the initial state select box value.

Result:

Click the state select box below, changing the selection to a state such as Alaska which has no tax. The state_exemptions label and input box should disappear, and the title (tooltip) should read "No state tax".