I'm doing a nested select with connection to mysql and sending a data with the post method throws me the error of undefined variable, perform the tests and in fact nothing is being sent. I use Jquery to send this data in my case is the region id
PS: I will omit the code of the collection since it is connected to the database, but if it is necessary to solve the forum I will publish it.
metodos.php
function get_region(){
$con = conbd();
$query_reg = "SELECT * FROM tbl_region ORDER BY nombre_region ASC";
if($stmt_reg = mysqli_query($con,$query_reg)){
while($row = mysqli_fetch_assoc($stmt_reg)){
?> <option value="<?php echo $row['id_region'] ?>" > <?php echo $row['nombre_region'] ?> </option> <?php
}
}
mysqli_free_result($stmt_reg);
mysqli_close($con);
}
get-provincia.php
<?php include("conbd.php");
$id_region = $_POST['id_region'];
$con = conbd();
$query = "SELECT * FROM tbl_provincia WHERE idRegion='$id_region' ORDER BY nombre_provincia ASC";
$stmt = mysqli_query($con,$query);
$html = "<option value='0'>Seleccione</option>";
while($row = mysqli_fetch_assoc($query)){
$html = "<option value='".$row['id_provincia']."'>".$row['nombre_provincia']
."</option>";
}
echo $html;
?>
index.php
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Trabajos | Check list system</title>
<script src="assets/js/jquery.js"></script>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<!--external css-->
<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="assets/js/bootstrap- datepicker/css/datepicker.css" />
<link rel="stylesheet" type="text/css" href="assets/js/bootstrap- daterangepicker/daterangepicker.css" />
<!-- Custom styles for this template -->
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/style-responsive.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"> </script>
<![endif]-->
<?php include ("menu-encabezado.php");
include ("lib/metodos.php");?>
<script language="javascript">
//combo anidado
$(document).ready(function(e) {
$("#region").change(function(){
$("#region option:selected").each(function() {
//guardamos el id de region
var id_region = $(this).val();
$.post("lib/get-provincia.php", {id_region:id_region
}, function(dato){
$("#provincia").html(dato);
});
});
});
});
</script>
</head>
<body>
<form id="crear-estacion" class="form-horizontal style-form" method="post">
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label" for="nom_est">Nombre</label>
<div class="col-sm-10">
<input id="nom_est" name="nom_est" type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label for="dire_est" class="col-sm-2 col-sm-2 control-label">Direción</label>
<div class="col-sm-10">
<input id="dire_est" name="dire_est" type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label" for="region">Región</label>
<div class="col-sm-10">
<select class="form-control" id="region">
<option value="0">Seleccione</option>
<?php get_region();?>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label" for="provincia">Provincia</label>
<div class="col-sm-10">
<select class="form-control" id="provincia">
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label" for="comuna">Comuna</label>
<div class="col-sm-10">
<select class="form-control" id="comuna" >
<option value="0">Seleccione</option>
</select>
</div>
</div>
<button type="submit" class="btn btn- theme">Crear</button>
</form>
</body>