使用数组值更改选择值

Question

Hello I have 2 select in the same form :

<form role="form" method="post" action="controlreservas/agregareserva.php" >
<!--ID RESIDENCIAL-->             
<?php
include "controlreservas/conexion.php";
$sql1= "select id_residencial from residenciales";
$query = $con->query($sql1);
?>
<label>Residencial</label>
<select name="id_residencial">
<?php if($query->num_rows>0):?>
<?php while ($r=$query->fetch_array()):?>
<option value="<?php echo $r["id_residencial"]; ?>"><?php echo $r["id_residencial"]; ?></option>
<?php endwhile;?>
<?php else:?>
<?php endif;?>
</select>
</div>
<!--ID RESIDENCIAL-->

<!--ID HABTIACION (NUMERO HABITACION)-->                  
<?php
include "controlreservas/conexion.php";
$sql1= "select id_residencial,id_habitacion
from habitaciones 
where id_residencial=".$_POST["id_residencial"];
$query = $con->query($sql1);
?>
<label>N&deg; Habitaci&oacute;n</label>
<select name="id_habitacion">
<?php if($query->num_rows>0):?>
<?php while ($r=$query->fetch_array()):?>
<option value="<?php echo $r["id_habitacion"]; ?>"><?php echo $r["id_habitacion"]; ?></option>
<?php endwhile;?>
<?php else:?>
<?php endif;?>
</select>
</div>
<!--ID HABTIACION (NUMERO HABITACION)-->
 <button type="submit" class="btn btn-default" style="float:left">Ingresar Reserva</button>
</form>

First select it´s working, Second select I need take the value how in the forms: where id_residencial=".$_POST["id_residencial"]; , but I don´t know how is here ( I see codes from change values but not with arrays :/ )

Answer 1

You need one extra PHP page to use ajax call .

<script src="jquery.min.js"></script> // please link the path or use cdn 
<script type="text/javascript">
$(document).ready(function(){
    $('#id_residencial').on('change',function(){
        var id_residencial = $(this).val();
        if(id_residencial){
            $.ajax({
                type:'POST',
                url:'get_id_habitacion.php',
                data:'id_residencial='+id_residencial,
                success:function(html){
                    $('#id_habitacion').html(html);
                }
            }); 
        }else{
            $('#state').html('<option value="">Select first</option>');

        }
    });

});
</script>
<!--ID RESIDENCIAL-->             
<?php
include "controlreservas/conexion.php";
$sql1= "select id_residencial from residenciales";
$query = $con->query($sql1);
?>
<label>Residencial</label>
<select name="id_residencial">
<?php if($query->num_rows>0):?>
<?php while ($r=$query->fetch_array()):?>
<option value="<?php echo $r["id_residencial"]; ?>"><?php echo $r["id_residencial"]; ?></option>
<?php endwhile;?>
<?php else:?>
<?php endif;?>
</select>
</div>
<!--ID RESIDENCIAL-->
<!--ID HABTIACION (NUMERO HABITACION)-->                  
<select name="id_habitacion">
</select>
</div>
<!--ID HABTIACION (NUMERO HABITACION)-->
 <button type="submit" class="btn btn-default" style="float:left">Ingresar Reserva</button>
</form>

Create a new php file say "get_id_habitacion.php" with code

<?php
$id_residencial=$_POST["id_residencial"];
$sql2= "select id_residencial,id_habitacion
from habitaciones 
where id_residencial='$id_residencial';
$query2 = $con->query($sql2);
?>
<label>N&deg; Habitaci&oacute;n</label>
<?php if($query2->num_rows>0):?>
<?php while ($r2=$query2->fetch_array()):?>
<option value="<?php echo $r2["id_habitacion"]; ?>"><?php echo $r2["id_habitacion"]; ?></option>
<?php endwhile;?>
<?php else:?>
<?php endif;?>

Note : 1) Check the database (must be proper connected and have some data) 2) Check variable (Since i have not tested and run the code) 3) If problem exist , check "get_id_habitacion.php" using "localhost/project_name/get_id_habitacion.php" (remember to replace the second line of get_id_habitacion.php with a contact variable eg $id_residencial='5';) 4) use proper link for jquery.min.js or use its cdn