0

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.

5
  • Puedes poner tu archivo js
    – Jiorchovic
    el 18 jul. 2019 a las 15:43
  • @JoseCansecoJiorchovic ahí agregue el script que uso para cargar los datos a los select que tienen las categorías. no tengo la función en un archivo .js el 18 jul. 2019 a las 15:51
  • Que error te marca, porque al parecer te falta dataType: html en el ajax
    – Jiorchovic
    el 18 jul. 2019 a las 15:56
  • @JoseCansecoJiorchovic Capaz me exprese mal, eso anda y no me da error. pero necesito otro script que segun la selección del <select id=cat> y el <select id=cat2> muestre el costo de la inscripción. Lo cual supongo que debo hacer con otro script ajax el 18 jul. 2019 a las 16:05
  • En efecto tendrías que hacer otro ajax para traer la información dependiendo de los valores que existan en los select's previmanete cargados con tu ajax inicial. el 18 jul. 2019 a las 16:23

1 respuesta 1

0

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;
2
  • Voy a probar eso ya, muchas gracias. Yo tengo dos select segun los cuales varia el precio, tendria que agregar algo que lea el otro select en esa función o crear una nueva función ? el 18 jul. 2019 a las 18:09
  • Primero prueba con uno solo para que entiendas la manera en que funciona, luego de que lo entiendas aplicas otro script js como el que te di, pero usas los id del select al que quieres capturarle su valor
    – JGuerreroS
    el 19 jul. 2019 a las 4:09

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.