Pequeña hoja de pedidos

cargosan · #1 (**permalink**) 01/12/2010, 14:06

hola amigos estoy realizando una pequeña hoja de pedidos en la que tengo 3 campos por cada elemento que muesto: cantidad, precio, subtotal

Dado que saco los elemento por medio de php he hecho que los tres campos sean arrays para despues procesar el pedido en php.

mi problema es que me gustaria actualizar la hoja de pedido con jquery para que en cuanto cambie una de las cantidades pueda actualizarse todo.

el codigo que crea el form es el siguiente:

Código PHP:

 
      <?php 
        $resultado = $db->resultadoArray("SELECT * FROM productos ORDER BY id"); 
        foreach ($resultado as $result){ 
        ?> 
        <tr> 
        <td><?php echo '<span class="titulo">'.$result['titulo'].'</span> '.$result['descripcion']?></td> 
        <td><input type="text" name="cantidad[]" value="0" class="cantidad"/></td> 
        <td><input type="text" name="precio[]" value="<?php echo $result['precio'];?>" class="precio"/> 
        <td><input type="text" name="subtotal[]" value="0" class="subtotal"/></td> 
        </tr> 
        <?php 
        } 
        ?>

Ahora he intentado que al hacer el evento on blur de cualquiera de los elementos de la clase cantidad los actualice todos:

Código Javascript:

Ver original<script type="text/javascript">
$(function() {
$(".cantidad").blur(function() {
$(".cantidad").each(function() {
     total += //calculo el total;
    subtotal =//calculo el subtotal de esa fila;
    $('').val(subtotal); le añado el valor del subtotal
});
$("#total").val(total);
});
});
</script>

Pero no se despues de mucho intentarlo como acceder a precio[] y subtotal[] en cada iteración.

¿Alguien puede echarme una mano?

Muchas gracias de antemano

Dany_s · #2 (**permalink**) 02/12/2010, 06:33

no hace falta volver a calcular los valores de las otras filas, solo la fila donde hubo modificación

Código HTML:

Ver original<html>
    <head>
        <title>Ejemplo</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
            $('#pedidos .cantidad').keyup( function (){
                //Selecciono la fila donde se encuentra el cambio
                var tr = $(this).closest('tr');
                //Calculo el subtotal y muestro el valor en el input
                var sub = $(this).val() * $('.precio', tr).val();
                $('.subtotal', tr).val(sub);
            });
        });
        </script>
    </head>
    <body>
 
        <table>
            <thead>
                <tr>
                    <td>Producto</td>
                    <td>Cantidad</td>
                    <td>Precio</td>
                    <td>Subtotal</td>
                </tr>
            </thead>
            <tbody id="pedidos">
                <tr>
                    <td><span class="titulo">Producto 1</span></td>
                    <td><input type="text" name="cantidad[]" class="cantidad"/></td>
                    <td><input type="text" name="precio[]" disabled value="5" class="precio"/>
                    <td><input type="text" name="subtotal[]" disabled class="subtotal"/></td>
                </tr>
                <tr>
                    <td><span class="titulo">Producto 2</span></td>
                    <td><input type="text" name="cantidad[]" class="cantidad"/></td>
                    <td><input type="text" name="precio[]" disabled value="3" class="precio"/>
                    <td><input type="text" name="subtotal[]" disabled class="subtotal"/></td>
                </tr>
                <tr>
                    <td><span class="titulo">Producto 3</span></td>
                    <td><input type="text" name="cantidad[]" class="cantidad"/></td>
                    <td><input type="text" name="precio[]" disabled value="6" class="precio"/>
                    <td><input type="text" name="subtotal[]" disabled class="subtotal"/></td>
                </tr>
            </tbody>
        </table>
 
    </body>
</html>

$('').val debería ser $(this).val para referirte al elemento que asignaste el evento

cargosan · #3 (**permalink**) 02/12/2010, 11:36

Cita:

Iniciado por Dany_s

no hace falta volver a calcular los valores de las otras filas, solo la fila donde hubo modificación

Código HTML:

Ver original<html>
    <head>
        <title>Ejemplo</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
            $('#pedidos .cantidad').keyup( function (){
                //Selecciono la fila donde se encuentra el cambio
                var tr = $(this).closest('tr');
                //Calculo el subtotal y muestro el valor en el input
                var sub = $(this).val() * $('.precio', tr).val();
                $('.subtotal', tr).val(sub);
            });
        });
        </script>
    </head>
    <body>
 
        <table>
            <thead>
                <tr>
                    <td>Producto</td>
                    <td>Cantidad</td>
                    <td>Precio</td>
                    <td>Subtotal</td>
                </tr>
            </thead>
            <tbody id="pedidos">
                <tr>
                    <td><span class="titulo">Producto 1</span></td>
                    <td><input type="text" name="cantidad[]" class="cantidad"/></td>
                    <td><input type="text" name="precio[]" disabled value="5" class="precio"/>
                    <td><input type="text" name="subtotal[]" disabled class="subtotal"/></td>
                </tr>
                <tr>
                    <td><span class="titulo">Producto 2</span></td>
                    <td><input type="text" name="cantidad[]" class="cantidad"/></td>
                    <td><input type="text" name="precio[]" disabled value="3" class="precio"/>
                    <td><input type="text" name="subtotal[]" disabled class="subtotal"/></td>
                </tr>
                <tr>
                    <td><span class="titulo">Producto 3</span></td>
                    <td><input type="text" name="cantidad[]" class="cantidad"/></td>
                    <td><input type="text" name="precio[]" disabled value="6" class="precio"/>
                    <td><input type="text" name="subtotal[]" disabled class="subtotal"/></td>
                </tr>
            </tbody>
        </table>
 
    </body>
</html>

$('').val debería ser $(this).val para referirte al elemento que asignaste el evento

Lo primero muchas gracias por responder. Hacía el bucle porque despues tengo que calcular el total, ¿alguna idea?

Saludos y gracias de nuevo

Dany_s · #4 (**permalink**) 03/12/2010, 06:57

recorre solo los de subtotal

Código HTML:

Ver original<html>
    <head>
        <title>Ejemplo</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
            $('#pedidos .cantidad').keyup( function (){
                //Selecciono la fila donde se encuentra el cambio
                var tr = $(this).closest('tr');
                //Calculo el subtotal y muestro el valor en el input
                var sub = $(this).val() * $('.precio', tr).val();
                $('.subtotal', tr).val(sub.toFixed(2));
                var total = 0;
                $('.subtotal').each( function(){
                    if ($(this).val()!= '')
                        total += parseFloat( $(this).val() );
                });
                $('#total').val( total.toFixed(2) );
            });
        });
        </script>
    </head>
    <body>
 
        <table>
            <thead>
                <tr>
                    <td>Producto</td>
                    <td>Cantidad</td>
                    <td>Precio</td>
                    <td>Subtotal</td>
                </tr>
            </thead>
            <tbody id="pedidos">
                <tr>
                    <td><span class="titulo">Producto 3</span></td>
                    <td><input type="text" name="cantidad[]" class="cantidad"/></td>
                    <td><input type="text" name="precio[]" disabled value="5.563" class="precio"/>
                    <td><input type="text" name="subtotal[]" disabled class="subtotal"/></td>
                </tr>
                <tr>
                    <td><span class="titulo">Producto 2</span></td>
                    <td><input type="text" name="cantidad[]" class="cantidad"/></td>
                    <td><input type="text" name="precio[]" disabled value="3" class="precio"/>
                    <td><input type="text" name="subtotal[]" disabled class="subtotal"/></td>
                </tr>
                <tr>
                    <td><span class="titulo">Producto 3</span></td>
                    <td><input type="text" name="cantidad[]" class="cantidad"/></td>
                    <td><input type="text" name="precio[]" disabled value="6" class="precio"/>
                    <td><input type="text" name="subtotal[]" disabled class="subtotal"/></td>
                </tr>
            </tbody>
        </table>
        Total: <input type="text" id="total" />
    </body>
</html>

fijate que los decimales te los redondea, si haces 5.563 * 2 = 11.126 pero toFixed con 2 decimales te da 11.13