Tutorial

Tutorial: Setup

Prerequisites: In order to follow along, you'll need to set up an HTTP server and run the TaxServer container on your local machine. For the purposes of this tutorial, we'll assume that you have a working server running locally, serving content to http://localhost. You'll also need to install Docker locally.
To launch a TaxServer container, at a command prompt:

docker run -it --rm -p 8000:80 calibertechnology/taxquery --cors=http://localhost

This starts up the docker image listening on port 8000 for http requests. The "--cors=" argument tells TaxServer to allow cross-site AJAX requests from localhost, which is considered a different origin since it's on a different port. Note that this requirement is specific to AJAX.

With an HTTP server and the docker image running, we're ready for some preliminary html and javascript code. We won't call the TaxServer backend yet, we'll just get a simple form started, with some helper functions compute, getFloat, and getInt.

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> <button onclick="compute(); return false;">Compute</button> </form> </body> <script> : (Javascript goes here) </script> </html>

This is a very simple form, with

An earnings input,
payperiods select box,
filingstatus select box, and
compute button.

The button calls the compute function when clicked, then returns false to keep the form from submitting (reloading the page).

Javascript:

	function compute() {
		var earnings = getFloat('earnings');
		var filingstatus = getInt('filingstatus');
		var payperiods = getInt('payperiods');
		alert("earnings: " + earnings
			+ "\npayperiods: " + payperiods
			+ "\nfilingstatus: " + filingstatus);
	}
	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;
		}
	}

The getFloat and getInt helper functions provide a convenient absraction for obtaining form values.

The compute function gets the earnings, filingstatus, and payperiods values, and simply alerts the user to their values.

Result:

Here's the results so far. When you click 'Compute', you should get an alert box with the earnings, payperiod, and filingstatus values.