Utilizar ajax para consultar base de datos según selección de un select

publicado por: Anonymous

estoy desarrollando un proyecto en el cual necesito utilizar ajax para mostrar el costo de una inscripción el cual va a ir variando según la selección que haga el usuario. Conozco poco y nada de ajax y por lo general investigando en Internet todo se aprende pero estoy con muy poco tiempo y me esta costando bastante por eso recurro al foro a ver si alguien es tan amable de ayudarme y luego esto sirve para alguien mas.

Mi situación es la siguiente:

Tengo una pagina con un formulario en el cual el usuario selecciona la categoría de carrera que va a inscribirse (pueden ser dos), y necesito mostrar el costo de la inscripción de alguna forma según que categorias selecciono. Todo esto antes de enviar el formulario, por eso necesito ajax.

Codigo html:

   <form class="" id="frmInscripcion" action="../proyecto/procesarInscripcion.php" method="POST">

        <div class="w3-row w3-mobile w3-center">

            <select class="w3-select w3-border" required id="fecha" name="fecha"> 
                <option value="" disabled selected>Seleccione la carrera:</option>
                <?php foreach ( $result as $option ) : ?>
                    <option value="<?php echo $option["id"]; ?>"><?php echo $option["descripcion"] . " Fecha: " . $option["fecha"]; ?></option>

                <?php endforeach; ?>

            </select>
        </div>
        <div class="w3-row w3-mobile">        
        <br>
            <select class="w3-select w3-border" name="cat" id="cat" required>
                <option value="0" disabled selected>Seleccione su categoría</option>
            </select>
        </div>
        <br>


        <div class="w3-row w3-mobile">
            <div class="w3-half">      
                <label>Quiero inscribirme a otra categoría:  </label>
            </div>
            <div class="w3-half">
                <input type="checkbox" id="cat2" name="cat2" onclick="mostrarCat2()">
                <select style="display:none" class="w3-select w3-border" name="selcat2" id="selcat2" required>
                        <option value="0" disabled selected>Seleccione la segunda categoría:</option>
                </select>
            </div>
        </div><br>
<input class="w3-input w3-green" type="submit" id="btnInscripcion" name="btnInscripcion" value="Inscribirme">
</form>

Script js que utilizo para cargar los datos en los select de categorías:

 <script>
  $(document).ready(function(){
    // Bloqueamos el SELECT de las fechas
    $("#cat").prop('disabled', true);
    $("#selcat2").prop('disabled', true);

// Hacemos la lógica que cuando nuestro SELECT cambia de valor haga algo
$("#fecha").change(function(){
    // Guardamos el select de las sub categorias
    var cat = $("#cat");
    var selcat2 = $("#selcat2");
    // Guardamos el select de las fechas
    var fecha = $(this).val();
    //alert(fecha);
    if($(this).val() != '')

    {
        $.ajax({
            data: { fecha },
            url:   'buscar.php',
            type:  'POST',

            beforeSend: function () 
            {
                $("#fecha").prop('disabled', true);
            },

          success: function(data)            
       {

        $("#cat").prop('disabled', false);
        $("#fecha").prop('disabled', false);
        $("#selcat2").prop('disabled', false);
        $('#cat').html(data);  
        $('#selcat2').html(data);    

       },
            error: function()
            {
                alert('Ocurrio un error en el servidor ..');
                cat.prop('disabled', false);
                selcat2.prop('disabled', false);
            }
        });
    }
    else
    {
        cat.find('option').remove();
        cat.prop('disabled', true);
    }
})

})

Tengo una base de datos mysql con una tabla con las categorías y los precios. Y necesito consultarla para traer el precio de la inscripción.

Necesito ayuda con la función ajax para enviar la información y mostrar un div en pantalla con el costo de inscribirse.

solución

En el JS usa este código

 $("#id_select").change(function() {

    $("#id_select option:selected").each(function() {
        valor = $(this).val();
        $.get("url.php", { valor }, function(data) {
            $("#id_costo").html(data);
        });
    });

});

Te falta el script php que hace la consulta, por ejemplo “url.php”, el cual traera la respuesta, en este caso el valor de la inscripción, algo así por ejemplo

<?php

include 'conexion.php';

$id_carrera = $_GET['valor'];

$sql = "SELECT id, costo FROM carreras WHERE id_carrera = $id_carrera";

$result = mysqli_query($conn,$sql);

$costo = mysqli_fetch_array($result);

echo $costo;
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *