4

Estoy realizando un select anidado con conexión a mysql y al enviar un dato con el método post me arroja el error de variable indefinida,realice las pruebas y efectivamente no se esta enviando nada. Utilizo Jquery para realizar el envió de este dato en mi caso es el id de región

PD: omitiré el código de la coleccione ya que se conecta a la base de datos ,pero si es necesario para dar solución al foro lo publicare.


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>

1 respuesta 1

0

Realmente no veo necesario recorrer todo el conjunto de "option" para atrapar el valor que se selecciona, simplemente podrías utilizar en el select id_region algo como esto:

function envia_region()
{
  var id_region=$('#region option:selected').val(); 
  $.post("lib/get-provincia.php", 
  {id_region:id_region},
  function(dato){
   $("#provincia").html(dato);
  });
 
}
<select class="form-control" id="region" onchange='envia_region()'>
    <option value="0">Seleccione</option>
      <?php get_region();?>
    </select>

Saludos , espero te sirva amigo !

3
  • Modifique el código teniendo en cuenta tu consejo pero la variable que captura la información por post sigue vacía
    – Jhn-pl
    Commented el 27 ago. 2018 a las 19:44
  • falto agregar el option:selected para que se refleje la option seleccionada
    – demepty
    Commented el 27 ago. 2018 a las 20:28
  • En que parte podrías orientarme porfavor...
    – Jhn-pl
    Commented el 29 ago. 2018 a las 14:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.