1

Al realizar una consulta, muestro en una tabla los resultados, cada fila cuenta con un botón. Al pulsarlo muevo la información de la fila seleccionada a un textarea. El problema viene que al tener todos los botones el mismo identificador, java coge siempre la primera fila. (Solucionado).

https://jsfiddle.net/a50ue2bw/

El problema ahora es que al realizar la cuenta, coge los valores de la primera fila siempre. ¿Alguna solución?

$('.button').on('click',calcular);
function calcular() {
    $('#pedido').val($('#pedido').val() + $(this).closest('tr').find('#cantidad').val());
    $('#pedido').val($('#pedido').val() + " "+ $(this).closest('tr').find('select option:selected').attr('value'));
    $('#pedido').val($('#pedido').val() + " "+ $(this).attr('nombre')+ "\n");
    
    var newPrice = parseFloat($('body').find('#categoria option:selected').attr('precio'));
    var cantidadt = parseFloat($('body').find('#cantidad').val());
    $("#cuenta").val(parseFloat($("#cuenta").val())+parseFloat(newPrice*cantidadt)+' €');
    $("#save").val(parseFloat($("#save").val())+parseFloat(newPrice*cantidadt));
    
     
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
while ($datos=mysqli_fetch_array($result)) {
                            ?>
                            <table>
                            <tr id="fila" value="<?php echo $datos["idevento"];?>">  
                                    <td><?php echo $datos["idevento"];?></td>  
                                    <td><?php echo $datos["idrecinto"];?></td>  
                                    <td><?php echo $datos["fecha"];?></td>
                                    <td><?php echo $datos["entradas"];?></td>
                                    <td><?php echo $datos["descripcion"];?></td>
                                    
                                    <td><select id="categoria" name="categoria" placeholder="Categoría">
                                    <?php
                                    
                                    $query2 ="SELECT * FROM categoria ;";  
                                    $result2 = mysqli_query($conexion, $query2);
                
                                    while ($datos2=mysqli_fetch_array($result2)) {
                                    ?>
                                    <option value="<?php echo $datos2["idcategoria"];?>" precio="<?php echo $datos2["precio"];?>" ><?php echo $datos2["idcategoria"].' ('; echo $datos2["precio"].')';?>
                                    
                                    <?php
                            }
                            ?>
                                        </option>  
                                    </select></td>
                                <td><input id="cantidad" min="1" max="10" name="cantidad" type="number" placeholder="Cantidad"  required /></td>
                                <td><input class="button primary small" nombre="<?php echo $datos["idevento"];?>"  id="idevento" value="Añadir"></td>
                                
                                
                               </tr>  
                            

                            <?php
                            }
            
                            
        }
                          
                          ?>  
                            
                            </table> 
                        
                <div id="main">
                        <div class="inner">
                            <h1>Pedido</h1>
                            <textarea id="pedido" name="pedido" readonly="readonly"></textarea>
                            <input type="text" name="cuenta" id="cuenta" class="form-control" value=0 placeholder="Importe Total" required readonly="readonly" >
                            
                            <input type="text" name="save" id="save" class="form-control" value=0  style="display:none;" required>
                    </div>
                </div>

8
  • No entiendo muy bien la pregunta, pero si sabes el problema, sabes la solucion
    – Srsole
    Commented el 10 ago. 2020 a las 8:06
  • Cada fila cuenta con un botón, al seleccionar cualquier botón de la tabla, java coge los valores de la primera fila, habiendo pulsado el botón de otra fila.
    – Fid
    Commented el 10 ago. 2020 a las 8:10
  • pues donde creas los botones le pasas por argumento a JAVASCRIPT el numero de fila o el id del <tr> o algo que sea identificador unico.
    – Srsole
    Commented el 10 ago. 2020 a las 8:13
  • Por favor edita la pregunta para agregar el código aquí mismo, no en un sitio externo.
    – Triby
    Commented el 10 ago. 2020 a las 20:16
  • Usa 'idevento' para hacer que el boton solo afecte al el <tr> que tiene ese 'idevento'
    – Srsole
    Commented el 11 ago. 2020 a las 7:11

1 respuesta 1

1

Lo primero de todo, cambiaria la creacion de la tabla dinamica que tienes. te los señalo asi (n)

Primero te pongo como lo haria, y despues te digo el motivo y que se tiene que cambiar

while ($datos=mysqli_fetch_array($result)) {
?>
    <table> (1)
        <tr id="fila" (2) value="<?php echo $datos["idevento"];?>" (3)>  
                <td><?php echo $datos["idevento"];?></td>  
                <td><?php echo $datos["idrecinto"];?></td>  
                <td><?php echo $datos["fecha"];?></td>
                <td><?php echo $datos["entradas"];?></td>
                <td><?php echo $datos["descripcion"];?></td>
                <td><select id="categoria" (4) name="categoria" placeholder="Categoría">
                <?php
                    $query2 ="SELECT * FROM categoria ;"; (5) 
                    $result2 = mysqli_query($conexion, $query2);
                    while ($datos2=mysqli_fetch_array($result2)) {
                ?>
                        <option value="<?php echo $datos2["idcategoria"];?>" precio="<?php echo $datos2["precio"];?>" ><?php echo $datos2["idcategoria"].' ('; echo $datos2["precio"].')';?>
                <?php
                    }
                ?>
                        </option>  
                    </select></td>
                <td><input id="cantidad" (6) min="1" max="10" name="cantidad" type="number" placeholder="Cantidad"  required /></td>
                <td><input class="button primary small" nombre="<?php echo $datos["idevento"];?>"  id="idevento" (7) value="Añadir"></td>
           </tr>  
<?php
}
?>  
    </table>

(1) <table> esta dentro del while, ponlo fuera, es necesario, sino la tabla no estara bien formada.

(2) Ponle un id unico a cada tr, por ejemplo: <tr id="<?php echo 'fila'. $datos['idevento']" ..., de esta manera siempre podemos acceder a un <tr> sin mayores complicaciones.

(3) Usaremos nuestros propios atributos, es decir, en cada <tr> crearemos el atributo idevento, idrecinto, fecha... y los llenamos con los datos correspondientes, por ejemplo:

<tr id="<?php echo 'fila'. $datos['idevento']" value="<?php echo $datos['idevento'];?>"  idevento="<?php echo $datos['idevento'];?>" idrecinto="<?php echo $datos['idrecinto'];?>"

Esto sirve para poder recoger datos despues, sin muchas complicaciones, simplemente conociendo el idevento.

(4) Debes poner un id unico a tu <select>, sino lo vas hacer no lo pongas, pero no los repitas. Es como el caso (2)

(5) Evita el uso de * en tus querys, mejorara mucho el rendimiento si lo categorizas correctamente (usando el nombre del campo)

(6) y (7) El mismo caso que (2) y (4), acostúmbrate a usar id únicas, sino las vas a usar no las pongas, y si la pones, que sean únicas, por que después cuando quieras acceder siempre te cogerá la primera ocurrencia, por no decir que el HTML estara mal construido.


Hasta aquí la construcción de la tabla dinámica.

Ahora vamos con el JS

Aquí te voy a poner la función, y te la voy comentando.

$("button").each(function(index, el) { //aqui entramos en bucle y hara esto para cada 'button'
    var idEvento = $(this).parent("tr").attr("idevento"); //Capturamos el idEvento al que haremos referencia
    $(this).on('click', function(){
        var html = "";
        var cantidad = $("tr[idevento="+idEvento+"]").attr("cantidad"); //capturamos la cantidad, recuerda que el paso anterior lo pusimos como atributo
        var nombre = $("tr[idevento="+idEvento+"]").attr("nombre"); //capturamos el nombre, recuerda que el paso anterior lo pusimos como atributo
        var categoria = $("select[id=categoria"+idEvento+"] option:selected").attr("value"); //capturamos la categoria usando idEvento, recuerda que el id lo cambiamos arriba

        html = "<p>"+cantidad+"</p>";
        html += "<p>"+categoria+"</p>";
        html += "<p>"+nombre+"</p>";
        //llenamos el textarea
        $("#pedido").val(html); //no se si el textarea funciona con val() o html()
        //calculamos los datos, pero usando idEvento, que sera unico, lo cambiamos en en la construccion de la tabla (arriba)
        var newPrice = parseFloat($("select[id=categoria"+idEvento+"] option:selected").attr("precio"));
        var cantidadt = parseFloat($("#cantidad").val());
        $("#cuenta").val(parseFloat($("#cuenta").val()) + parseFloat(newPrice * cantidadt) + " €");
        $("#save").val(parseFloat($("#save").val()) + parseFloat(newPrice * cantidadt));
    });             
});

Y FIN, con esto te debe funcionar, yo lo hecho en una función anónima por que me gusta mas, siéntete libre de hacerlo como mas te guste ;)


Edicion me habia dejado un punto ('.') entre button y each, esta corregido!

10
  • Javascript no funciona al pulsar los botones
    – Fid
    Commented el 12 ago. 2020 a las 8:47
  • jsfiddle.net/ftekLg90
    – Fid
    Commented el 12 ago. 2020 a las 8:48
  • en el fiddle no te funcionara nunca, no tocan PHP, pruebalo en localhost
    – Srsole
    Commented el 12 ago. 2020 a las 8:49
  • ademas me dejado un punto, lo edito!
    – Srsole
    Commented el 12 ago. 2020 a las 8:50
  • Tiene que haber otro error, sigue sin funcionar
    – Fid
    Commented el 12 ago. 2020 a las 8:57

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.