<!DOCTYPE html>
<?php
	$conn = new mysqli('localhost', 'root', '', 'dbvalidationinscription') or die(mysqli_error());	
?>
<html lang = "eng">
	<head>
		<meta charset = "UTF-8" />
		<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css" />
	</head>
<body>
	<nav class = "navbar navbar-default">
		<div class = "container-fluid">
			<a class  = "navbar-brand" href = "https://www.sourcecodester.com">Sourcecodester</a>
		</div>
	</nav>
	<div class = "container-fluid">	
		<div class = "row">
			<div class = "col-md-3"></div>
			<div class = "col-md-6 well">
				<h4 class = "text-primary">Dependent Select Option With MySQLi Using PHP / jQuery</h4>
				<hr style = "border-top: 1px dotted #8c8b8b;"/>
					<form class = "form-inline">
						<div class  =  "form-group">
							<label>Animal Group:</label>
							<select id = "group" class = "form-control" name = "animal-groupl" required = "required">
								<option value = "">Select a group</option>
								<?php
									$g_animal = $conn->prepare("SELECT * FROM `animal` GROUP BY `animal_group`");
									if($g_animal->execute()){
										$g_result = $g_animal->get_result();
									}
									while($f_ganimal = $g_result->fetch_array()){
								?>
									<option value = "<?php echo $f_ganimal['animal_group']?>"><?php echo $f_ganimal['animal_group']?></option>
								<?php
										}
									$conn->close();	
								?>
							</select>
						</div>	
						<div class = "form-group">
							<label>Animal:</label>
							<select  id = "dep" name = "animal"  class = "form-control" disabled = "disabled" required = "required">
								<option value = "">Select an animal</option>
							</select>
						</div>
					</form>
			</div>
		</div>
	</div>	
</body>
<script src = "js/jquery-3.1.1.js"></script>
<script type = "text/javascript">
	$(document).ready(function(){
		$('#group').on('change', function(){
				if($('#group').val() == ""){
					$('#dep').empty();
					$('<option value = "">Select an animal</option>').appendTo('#dep');
					$('#dep').attr('disabled', 'disabled');
				}else{
					$('#dep').removeAttr('disabled', 'disabled');
					$('#dep').load('animal_get.php?animal_group=' + $('#group').val());
				}
		});
	});
</script>
</html>