[SOLUCIONADO] problema con operaciones datos dinamicos

[Osvaldo_Jacobo]

buenas tardes soy nuevo en el foro y llevo poco trabajando con javascript mi problema es que quiero hacer un tipo carrito de compras y necesito multiplicar la cantidad de cada producto por su precio para despues mostrarlo pero no he podido hacerlo funcionar
este es mi codigo javascript:

Código:

<script type="text/javascript">
    $(document).ready(function(){
        $(".grupo").keyup(function()
        {
            var importe=$(this).find("input[name=precio]").value();
            var cantidad=$(this).find("input[name=cantidad]").value();
            $(this).find("[class=total]").html(parseInt(importe)*parseInt(cantidad));
 
            // calculamos el total de todos los grupos
            var total=0;
            $(".grupo .total").each(function(){
                total=total+parseInt($(this).html());
            })
            $(".total .total").html(total);
        });
    });
    </script>

y este es el html:

Código HTML:

<table width="90%" border="1" cellspacing="0">
  <tr>
    <th scope="col">nombre</th>
    <th scope="col">cantidad</th>
    <th scope="col">precio</th>
    <th scope="col">Subtotal</th>
  </tr>
    <?php do { ?>
    <div class="grupo"><tr>
      <td><?php echo $row_carrito['nombre_producto']; ?></td>
      <td><input  type="text" name="cantidad" value="<?php echo $row_carrito['cantidad'];?>"/></td>
      <td>$<input type="text" name="precio" value="<?php echo $row_carrito['precio'];?>"/></td>
      <td><span class="total">0</span></td>
    </tr></div>
    <?php } while ($row_carrito = mysql_fetch_assoc($carrito));  ?>
    <div class="total"><tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>total:</td>
      <td><div class="total"><span class="total">0</span></div></td>
    </tr>
    </div>
</table> 

todos los datos los muestra correctamente pero al momento de cambiar la cantidad de productos no hace nada... agradeceria mucho que pudieran ayudarme

[Alexis88]

Bienvenido a Foros del Web.

El método de jQuery para obtener el valor de un elemento del formulario se llama .val(), no .value().

Un saludo

[Osvaldo_Jacobo]

Lo he corregido como me dijiste y sigue sin funcionar

[Osvaldo_Jacobo]

logre hacerlo funcionar poniendo el class en la fila de la tabla en lugar de divs pero ahora mi problema es que al cargar la pagina los totales me aparecen en 0 y se actualizan hasta que pongo el foco en alguno de los textbox y presiono una tecla

Código Javascript:

<script type="text/javascript">
    $(document).ready(function(){
        $(".grupo").keyup(function()
        {
            var importe=$(this).find("input[name=importe]").val();
            var cantidad=$(this).find("input[name=cantidad]").val();
            $(this).find("[class=total]").html(parseFloat(importe)*parseFloat(cantidad));
 
            // calculamos el total de todos los grupos
            var total=0;
            $(".grupo .total").each(function(){
                total=total+parseFloat($(this).html());
            })
            $(".total .total").html(total);
        });
    });
    </script>
 

Código HTML:

<table width="90%" border="1" cellspacing="0">
  <tr>
    <th scope="col">nombre</th>
    <th scope="col">cantidad</th>
    <th scope="col">precio</th>
    <th scope="col">Subtotal</th>
  </tr>
    <?php do { ?>
  <tr class="grupo">
      <td><?php echo $row_carrito['nombre_producto']; ?></td>
      <td><input type="text" name="cantidad" value="<?php echo $row_carrito['cantidad']; ?>" /></td>
      <td><input type="text" name="importe" value="<?php echo $row_carrito['precio']; ?>" /></td>
      <td><span class="total">0</span></td>
    </tr>
    <?php } while ($row_carrito = mysql_fetch_assoc($carrito));  ?>
    <tr class="total">
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>total:</td>
      <td class="total"><span class="total">0</span></td>
    </tr>
    </div>
</table>
 

asi quedo el codigo hasta el momento

[Alexis88]

Ese comportamiento es lógico. Fíjate que estableces el valor cero como total, mientras que el cálculo se realizará recién cuando se produzca el evento keyup en alguno de los bloques de clase "grupo". Si quieres que el cálculo se realice al cargar la página pero también cuando se produzca el evento keyup, te recomiendo tener una función con las instrucciones respectivas, de esta forma, la ejecutaría cuando cargue la página y cuando se produzca el evento keyup.

Código Javascript:

function calcular(){
    //Instrucciones
}
 
//Cuando cargue la página
$(document).ready(function(){
    //Ejecutas la función
    calcular();
 
    //Y también la estableces para cuando se produzca el evento "keyup"
    $(".grupo").keyup(calcular);
});
 

Un saludo

[Osvaldo_Jacobo]

ok perfecto ahora funciona correctamente muchas gracias ahora si no fuera molestia como podria hacer que el total me aparezca con 2 decimales ya que los precios que vienen de la base de datos algunos son con 2 decimales y al momento de que se hacen las operaciones se muestran con solo un decimal

[Alexis88]

Puedes utilizar el método .toFixed().

[Osvaldo_Jacobo]

listo ya funciona todo muy bien muchas gracias por la ayuda...les dejo el codigo por si a alguien le sirve

Código Javascript:

<script type="text/javascript">
function calcular(){
            var importe=parseFloat($(this).find("input[name=importe]").val());
            var cantidad=$(this).find("input[name=cantidad]").val();
            $(this).find("[class=total]").html((parseFloat(importe)*parseFloat(cantidad)).toFixed(2));
 
            // calculamos el total de todos los grupos
            var total=0;
            $(".grupo .total").each(function(){
                total=total+parseFloat($(this).html());
            })
            $(".total .total").html(total.toFixed(2));
            
}
$(document).ready(function(){
    calcular();
 $(".grupo").keyup(calcular);
});
    </script>
 

Código HTML:

<table align="center" style="text-align:center;" width="90%" border="1" cellspacing="0">
  <tr>
    <th scope="col">nombre</th>
    <th scope="col">cantidad</th>
    <th scope="col">precio</th>
    <th scope="col">Subtotal</th>
  </tr>
    <?php do { ?>
  <tr class="grupo">
      <td><?php echo $row_carrito['nombre_producto']; ?></td>
      <td><input type="text" name="cantidad" value="<?php echo $row_carrito['cantidad']; ?>" autocomplete="off" /></td>
      <td><input style="border:0; background:none; width:55px; text-align:center;" readonly="readonly" type="text" name="importe" value="<?php echo $row_carrito['precio']; ?>" /></td>
      <td><span class="total"><?php echo $row_carrito['precio']; ?></span></td>
    </tr>
    <?php } while ($row_carrito = mysql_fetch_assoc($carrito));  ?>
    <tr class="total">
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>total:</td>
      <td class="total"><span class="total">0</span></td>
    </tr>
    </div>
</table>