tinyqc/v1/inc/view.php

<?php
include("config.php");
$date = date("Y-m-d");
?>
<form method='POST' action='inc/report.php' target='_blank'>
<table>
	<tr> <td>Date</td> <td>:</td> <td><input type='month' id='dates' name='dates' onInput='getTest(this.value);' /></td> </tr>
	<tr> <td>Test</td> <td>:</td> <td><select id='test' name='test' onchange='getControl(this.value)'><option> -- Select Test -- </option></select></td> </tr>
	<tr> <td>Control 1</td> <td>:</td> <td><select id='control1' name='control1' onchange='getControl2()'><option> -- Select Control -- </option></select></td> </tr>
	<tr> <td>Control 2</td> <td>:</td> <td><select id='control2' name='control2'><option> -- Select Control -- </option></select></td> </tr>
	<tr> <td><input type='submit' value='go'></td> </tr>
</table>
</form>
<script src='assets/jquery.js'></script>
<script type="text/javascript">
	function getTest(){
		// Empty the dropdown
		var testel = document.getElementById('test');
		var control1el = document.getElementById('control1');
		var control2el = document.getElementById('control2');
		
		test.innerHTML = "";
		control1.innerHTML = "";
		control2.innerHTML = "";

		var testopt = document.createElement('option');
		testopt.value = 0;
		testopt.innerHTML = '-- Select Test --';
		testel.appendChild(testopt);

		var controlopt = document.createElement('option');
		controlopt.value = 0;
		controlopt.innerHTML = '-- Select Control --';
		control1el.appendChild(controlopt);
		var controlopt = document.createElement('option');
		controlopt.value = 0;
		controlopt.innerHTML = '-- Select Control --';
		control2el.appendChild(controlopt);
		
		var dates = $("#dates").val();
		$.ajax({
			type: "POST",
			contentType: "application/json; charset=utf-8",
			url: "inc/view_ajax.php",
			datatype : 'JSON',
			data: JSON.stringify( {request:'getTest', dates: dates} ),
			success: function(response){
				var result = JSON.parse(response);
				var len = result.length;
				
				for(var i=0; i<len; i++){
					var id = result[i].id;
					var name = result[i].name;
					console.log(result[i]);
					// Add option to state dropdown
					var opt = document.createElement('option');
					opt.value = id;
					opt.innerHTML = name;
					testel.appendChild(opt);
				}
			},
			error:function(exception){alert('Exeption:'+exception);}
		});		
	}

	function getControl(){
		// Empty the dropdown
		var control1el = document.getElementById('control1');
		var control2el = document.getElementById('control2');
		control1el.innerHTML = "";
		control2el.innerHTML = "";
		
		var controlopt = document.createElement('option');
		controlopt.value = 0;
		controlopt.innerHTML = '-- Select Control --';
		control1el.appendChild(controlopt);
		controlopt.value = 0;
		controlopt.innerHTML = '-- Select Control --';
		control2el.appendChild(controlopt);

		// AJAX request
		var test = $("#test").val();
		var dates = $("#dates").val();
		$.ajax({
			type: "POST",
			contentType: "application/json; charset=utf-8",
			url: "inc/view_ajax.php",
			datatype : 'JSON',
			data: JSON.stringify( {request:'getControl', test: test, dates: dates} ),
			success: function(response){
				var result = JSON.parse(response);
				var len = result.length;
				
				for(var i=0; i<len; i++){
					var id = result[i].id;
					var name = result[i].name;
					console.log(result[i]);
					// Add option to state dropdown
					var opt = document.createElement('option');
					opt.value = id;
					opt.innerHTML = name;
					control1el.appendChild(opt);
					var opt = document.createElement('option');
					opt.value = id;
					opt.innerHTML = name;
					control2el.appendChild(opt);
				}
				
			},
			error:function(exception){alert('Exeption:'+exception);}
		});	
	}
</script>