0

Cuando capturo 3 valores que estan dentro de un foreach los envio a un script para realizar una consulta a MySql, de esta consulta se extrae el valor de un producto y se lleva a un input, cuando compilo el codigo el precio se imprime correctamente pero unicamente en el primer producto que se muestra, al ser un foreach trato de mostrar diferentes productos pero el precio solo se imprime en el primer articulo, el resto de articulos no se ven afectados

codigo...

<div class="row">

    <?php


        $sql=$pdo->prepare("SELECT motivos.id as mot_id, motivos.nombre as mot_nom, motivos.imagen as mot_img from motivos");
        $sql->execute();
        $res=$sql->fetchAll(PDO::FETCH_ASSOC);



    ?>

    <?php foreach($res as $resp) { ?>

        <div class="col-4 col-sm-6 col-md-6 col-lg-3 col-xl-3">
            
            <div class="card">
                <span> <h3 align="center"><?php echo $resp['mot_nom']; ?></h3> </span>
                <?php $nom_prod=$resp['mot_nom']; ?> 
                <img 

                title="<?php echo  $resp['mot_nom']; ?>"
                alt="<?php echo  $resp['mot_nom']; ?>"
                class="card-img-top" 
                src="<?php echo  $resp['mot_img']; ?>"
                height="250px"
                data-toggle="popover"
                data-trigger="hover"
                data-content="DESCRIPCION"
                >

                <div class="card-body">


            <form action="" method="post" onsubmit="return enviar();" >

                <input type="hidden" name="idmotivo" id="idmotivo" value="<?php echo  $resp['mot_id']; ?>">

                <select name="producto" id="select-producto">
                    <option value="0">Producto:</option>
                <?php
                    $sql2=$pdo->prepare("SELECT DISTINCT productos_madre.nombre as pro_mad_nombre, productos_madre.id as pro_mad_id from motivos INNER JOIN productos on motivos.id = productos.id_motivo INNER JOIN productos_madre on productos.id_prod_mad = productos_madre.id INNER JOIN colores on colores.id = productos.id_color where motivos.nombre = '$nom_prod' " );
                    $sql2->execute();
                    $res2=$sql2->fetchAll(PDO::FETCH_ASSOC);

                    foreach($res2 as $resp2) {
                        echo '<option value= "'.$resp2['pro_mad_id'].'">'.$resp2['pro_mad_nombre'].'</option>';
                    }
                ?>
                </select>


                <select name="color" id="select-color">
                    <option value="0">Color:</option>
                <?php

                    $sql3=$pdo->prepare("SELECT DISTINCT colores.nombre as color_nombre, colores.id as color_id from motivos INNER JOIN productos on motivos.id = productos.id_motivo INNER JOIN colores on productos.id_color = colores.id where motivos.nombre = '$nom_prod' " );
                    $sql3->execute();
                    $res3=$sql3->fetchAll(PDO::FETCH_ASSOC);

                    foreach($res3 as $resp3) {
                        echo '<option value= "'.$resp3['color_id'].'">'.$resp3['color_nombre'].'</option>';
                    }
                ?>            
                </select>
                <input type="submit" value="act">

            </form>

            <h5 class="card-title">$<input type="text" value="" name="respa" id="respa" ></h5>


                    <p>Cant:
                        <input type="number" name="cant" min="1" step="1" style="width:40px">
                    </p>


                <form action="" method="post">
                
                <input type="hidden" name="id" id="id" value="<?php echo openssl_encrypt($producto['id'],COD,KEY); ?>">
                <input type="hidden" name="nombre" id="nombre" value="<?php echo openssl_encrypt($producto['nombre'],COD,KEY); ?>">
                <input type="hidden" name="precio" id="precio" value="<?php echo openssl_encrypt($producto['precio'],COD,KEY); ?>">
                <input type="hidden" name="cantidad" id="cantidad" value="<?php echo openssl_encrypt(1,COD,KEY);?>">
                

                    <button class="btn btn-primary"
                        name="btnAccion"
                        Value="Agregar"
                        type="submit"
                    >
                        Agregar
                    </button>


                </form>

                    
                </div> 

            </div>  <!--cierre de Card-->

        </div>

        

    <?php } ?>


</div>

codigo script...

    <script> 

$(function () {
    $('[data-toggle="popover"]').popover()
});

</script>


            <script>
                function enviar(){
                    var id_motivo = document.getElementById('idmotivo').value;
                    var id_producto = document.getElementById('select-producto').value;
                    var id_color = document.getElementById('select-color').value;

                    var dataen = 'idmotivo='+id_motivo + '&select-producto='+id_producto+ '&select-color='+id_color;

                    $.ajax({
                        type:'post',
                        url:'precio.php',
                        data:dataen,
                        success: function(resp){
                            //$("#respa").html(resp);
                            //$("#inputrespa").val('#respa');
                            $("#respa").val(resp);
                        }
                    });
                    return false;
                }
            </script>

y en una imagen publico el codigo que consulta la base de datos en la imagen hago la conexion a la base de datos, capturo los datos de la anterior pagina y hago la consulta para luego imprimir el valor del producto

imagen de la pagina... en el motivo color funciona a la perfeccion, pero en los otros motivos no me actualiza el precio cuando selecciono el producto y el color correspondiente

5
  • ¿Dónde ocurre el problema exactamente? Y, ¿por qué lanzas tantas consultas algunas de ellas a la misma tabla? ¿por qué no traes los datos en una sola consulta?
    – A. Cedano
    Commented el 6 jul. 2020 a las 19:41
  • Dentro del ciclo estás creando formularios y todos repites ID para los campos, por eso es que en Javascript siempre obtienes el mismo valor.
    – Triby
    Commented el 6 jul. 2020 a las 20:16
  • Hola A. Cedano, tengo ordenada la pagina por motivos (feliz cumple, baby shower, animales), en cada uno de estos motivos tengo la opcion de escoger que producto deseo (plato, vaso, mantel) y su variacion en colores, asi que al traer los datos de la base de datos de productos (vaso, plato etc...) se me duplicaba segun la cantidad de variacion de colores que el motivo tuviera. Commented el 6 jul. 2020 a las 21:18
  • El problema es que el precio debe cambiar cuando selecciono el producto y el color de cada motivo mediante un ajax, este funciona bien pero unicamente con el primer motivo. La linea en la que traigo el precio del producto es la siguiente <h5 class="card-title">$<input type="text" value="" name="respa" id="respa" ></h5> Commented el 6 jul. 2020 a las 21:21
  • Añadi una imagen a la publicacion para enseñar como es el problema Commented el 6 jul. 2020 a las 21:25

1 respuesta 1

0

Tienes varios formularios y en cada uno repites ID de los campos, por eso es que siempre te toma solo uno. Al agregar onclick (en línea o con addEventListener()) siempre se envía el evento como parámetro, aunque no lo especifiques.

De forma que puedes aprovechar <form action="" method="post" onsubmit="return enviar();" > ese parámetro en la función enviar() para saber qué formulario vas a procesar y buscar los campos dentro con querySelector() o alguna de las funciones de jQuery, como find(), es cuestión de preferencias:

            function enviar(event){
                // Obtener el formulario que se está procesando
                let form = event.target;
                // Buscar campos dentro del formulario (variable form)
                var id_motivo = form.querySelector('input[name="idmotivo"]').value;
                var id_producto = form.querySelector('select[name="producto"]').value;
                var id_color = form.querySelector('select[name="color"]').value;

                var dataen = 'idmotivo=' + id_motivo + '&select-producto=' + id_producto + '&select-color=' + id_color;

                $.ajax({
                    type:'post',
                    url:'precio.php',
                    data:dataen,
                    success: function(resp){
                        //$("#respa").html(resp);
                        //$("#inputrespa").val('#respa');
                        $("#respa").val(resp);
                    }
                });
                return false;
            }

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.