Tutorial

Tutorial: Output Section

Our next step is to add an output area to the form, which getFederal will update. We'll also add a select box for choosing a state for 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> <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 an empty state select box, which gets filled by a call to loadStates in Javascript. We've also started a section for output, adding the out_federal input box to display results.

We don't do anything with the state value yet, but we'll use it in the next lesson.

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); 
		}); 
	} 
	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 we've changed both the compute and getFederal functions, so that they set values in the Output section.

We've also added loadStates to populate the state select box, calling it when the page loads.

Result:

Click 'Compute' below to update the results in the 'Output' section below.