JSFiddle - React, Tailwind, and code Playground

by anuradha kallahalla

HTML

<table width="100%">
<tr>
	<td>State Code</td>
	<td>
	<select name="stateCode" id="stateCode">
	<option value="AA" selected>AA - ARMED FORCES AMERICAS</option>
	<option value="AE">AE -ARMED FORCES EUROPE</option>
	<option value="AK">AK -ALASKA</option>
	<option value="AL">AL -ALABAMA</option>
	<option value="AP">AP -ARMED FORCES PACIFIC</option>
	<option value="AR">AR -ARKANSAS</option>
	<option value="AS">AS -AMERICAN SAMOA</option>
	<option value="AZ">AZ -ARIZONA</option>
	<option value="CA">CA -CALIFORNIA</option>
	<option value="CO">CO -COLORADO</option>
	<option value="CT">CT -CONNECTICUT</option>
	<option value="DC">DC -DISTRICT OF COLUMBIA</option>
	<option value="DE">DE -DELAWARE</option>
	<option value="FL">FL -FLORIDA</option>
	<option value="GA">GA -GEORGIA</option>
	<option value="GU">GU -GUAM</option>
	<option value="HI">HI -HAWAII</option>
	<option value="IA">IA -IOWA</option>
	<option value="ID">ID -IDAHO</option>
	<option value="IL">IL -ILLINOIS</option>
	<option value="IN">IN -INDIANA</option>
	<option value="IT">IT -INTERNATIONAL</option>
	<option value="KS">KS -KANSAS</option>
	<option value="KY">KY -KENTUCKY</option>
	<option value="LA">LA -LOUISIANA</option>
	<option value="MA">MA -MASSACHUSETTS</option>
	<option value="MD">MD -MARYLAND</option>
	<option value="ME">ME -MAINE</option>
	<option value="MI">MI -MICHIGAN</option>
	<option value="MN">MN -MINNESOTA</option>
	<option value="MO">MO -MISSOURI</option>
	<option value="MS">MS -MISSISSIPPI</option>
	<option value="MT">MT -MONTANA</option>
	<option value="NC">NC -NORTH CAROLINA</option>
	<option value="ND">ND -NORTH DAKOTA</option>
	<option value="NE">NE -NEBRASKA</option>
	<option value="NH">NH -NEW HAMPSHIRE</option>
	<option value="NJ">NJ -NEW JERSEY</option>
	<option value="NM">NM -NEW MEXICO</option>
	<option value="NV">NV -NEVADA</option>
	<option value="NY">NY -NEW YORK</option>
	<option value="OH">OH -OHIO</option>
	<option value="OK">OK -OKLAHOMA</option>
	<option value="OR">OR...

JavaScript

$(document).ready(function() {
	var table = $('#example').DataTable();

	$("#submitButton").click(function(){
			
			
			var stateCode= $('#stateCode').val();
			var zipCode= $('#zipCode').val();
			var cityName= $('#cityName').val();
			var countyName= $('#countyName').val();
		
			var jsonDataObject = new Object();
		    jsonDataObject.stateCode = stateCode==null?"":stateCode;
			jsonDataObject.zip = zipCode==null?"":zipCode;
			jsonDataObject.city = cityName==null?"":cityName;
			jsonDataObject.countyName = countyName==null?"":countyName;
			
			// turn the jsonData object into a string so it can be passed to the webservice
  		    var jsonData = JSON.stringify(jsonDataObject);
			jQuery.support.cors = true;
			
			alert(jsonData);
			
			$.ajax({
	            type: "POST",
	            dataType: "json",
	            data :jsonData,
	            contentType: "application/json",
	            url:"http://localhost:7001/WSVzipTaxwareClient/taxwareservice/xmljson",
	            success: AjaxGetFieldDataSucceeded,
				error: function(jqXHR, textStatus, errorThrown){
						alert('Fail : '+errorThrown);
						}
	        });
	
	});
	
} );

function AjaxGetFieldDataSucceeded(result) {
	
    if (result != "[]") {
		//var dataTab = $.parseJSON(result);
		var dataTab = JSON.stringify(result);
		alert(dataTab);
        $('#example').dataTable({
		"aaData": dataTab,
		"bRetrieve": true,
		"aoColumns": [{
        "mDataProp": "stateCode"
    }, {
        "mDataProp": "city"
    }, {
        "mDataProp": "countyName"
    }, {
        "mDataProp": "countyCode"
    }, {
        "mDataProp": "zip"
    },{
        "mDataProp": "geoCode"
    },{
        "mDataProp": "cityIndicator"
    },
      {
        "mDataProp": "taxAuthShipto"
    }
    ]
});

    }
}