Sumar y Multiplicar con Checklist Dinamicos

dwish · #1 (**permalink**) 16/03/2010, 10:39

Hola webMASTERs

Estoy tratando de hacer una interfaz en donde el usuario seleccione un producto con un Checklist y elija una cantidad y se calcule el total...

Encontre un codigo en la web muy bueno... pero solo sirve para casos Estaticos...
por ejemplo mis checklist los dibujo dinamicamente dependiendo de cuantos productos esten en la base!

Dejo el codigo base q llevo para ver si alguien me puede ayudar...

Código HTML:

<html>
<head>
<title>Productos</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="estilos.css" rel="stylesheet" type="text/css">

<script language="JavaScript" type="text/JavaScript">
<!--

function valorASumar(queCheck){
var check= document.getElementById(queCheck);
if(check.checked){
var cantidad= document.getElementById("cant"+queCheck);
var subtotal = check.value*cantidad.value;
subtotal = Math.round(subtotal*100)/100; //redondeo a dos decimales...
document.getElementById("t"+queCheck).value=subtotal;
return subtotal;
}
else{
document.getElementById("t"+queCheck).value = 0;
return 0;
}
}

function sumar(){
var total = 0;
total+=valorASumar("Producto1");
total+=valorASumar("Producto2");
total+=valorASumar("Producto3");
total+=valorASumar("Producto4");

return Math.round(total*100)/100; //redondeo a dos decimales...;

}
function ponerValor(){
document.getElementById("total").value = sumar();
}

//-->
</script>
</head>
<body>
<form name="form1" method="post" action="">
  <table width="100%" border="0">
    <tr>
      <td width="35%" align="right">Producto</td>
      <td width="20%">Cantidad</td>
      <td width="26%">Precio/un.</td>
      <td width="19%">Total</td>
    </tr>
    <tr>
      <td align="right">Producto1
        <input onClick="ponerValor()" name="Producto1" type="checkbox" id="Producto1" value="100"></td>
      <td><input onChange="ponerValor()" name="cantProducto1" type="text" id="cantProducto1" value="1" size="3" maxlength="3"></td>
      <td>100</td>
      <td><input name="t1" type="text" id="tProducto1" size="5" maxlength="5"></td>
    </tr>
    <tr>
      <td align="right">Producto2
        <input onClick="ponerValor()" name="Producto2" type="checkbox" id="Producto2" value="200"></td>
      <td><input onChange="ponerValor()" name="cantProducto2" type="text" id="cantProducto2" value="1" size="3" maxlength="3"></td>
      <td>200</td>
      <td><input name="t2" type="text" id="tProducto2" size="5" maxlength="5"></td>
    </tr>
    <tr>
      <td align="right">Producto3
        <input onClick="ponerValor()" name="Producto3" type="checkbox" id="Producto3" value="300"></td>
      <td><input onChange="ponerValor()" name="cantProducto3" type="text" id="cantProducto3" value="1" size="3" maxlength="3"></td>
      <td>300</td>
      <td><input name="t3" type="text" id="tProducto3" size="5" maxlength="5"></td>
    </tr>
    <tr>
      <td align="right">Producto4
        <input onClick="ponerValor()" name="Producto4" type="checkbox" id="Producto4" value="400"></td>
      <td><input onChange="ponerValor()" name="cantProducto4" type="text" id="cantProducto4" value="1" size="3" maxlength="3"></td>
      <td>400</td>
      <td><input name="t4" type="text" id="tProducto4" size="5" maxlength="5"></td>
    </tr>
    <tr>
      <td align="right"></td>
      <td></td>
      <td>Precio final</td>
      <td><input name="t12" type="text" id="total" size="5" maxlength="5"></td>
    </tr>
  </table>
</form>
</body>
</html>

Saludos!

dannytm · #2 (**permalink**) 16/03/2010, 10:42

Saludos Dwish, los chacklists los generas por PHP, verdad?

dwish · #3 (**permalink**) 16/03/2010, 10:56

sip... por ejemplo yo tenia esto!

Código PHP:

  <?php

$sql_productos = mysql_query("SELECT * FROM clientessubCategoria",$link);

while($fila=mysql_fetch_array($sql_productos)) {

 
$codigo = $fila[0];

$nombre = $fila[1];

$precio = $fila[5];

 
?>

Código HTML:

<tr>
      <td align="right">Producto1
        <input onClick="ponerValor()" name="Producto1" type="checkbox" id="Producto1" value="100"></td>
      <td><input onChange="ponerValor()" name="cantProducto1" type="text" id="cantProducto1" value="1" size="3" maxlength="3"></td>
      <td>100</td>
      <td><input name="t1" type="text" id="tProducto1" size="5" maxlength="5"></td>
    </tr>
    <tr>

Código PHP:

<?php } ?>

yo creia q si reemplazaba el nombre de los Check con mi nombre de producto podria funcionar... ahora estube viendo q quizas eso esta bien.. y creo q el error podria ser por la "function sumar()" ya q nose como mandarle los names de mis check para q los sume...

Saludos!

dannytm · #4 (**permalink**) 16/03/2010, 11:01

Código HTML:

Ver original<input onClick="ponerValor('el_id_del_checkbox')" name="Producto1" type="checkbox"

Pon el Id del checkbox dentro del parámetro del Onclick, a ver que pasa.

Saludos.

dwish · #5 (**permalink**) 16/03/2010, 11:11

dannytm gracias por tu ayuda!

aprovechando q estas :p

mira descubri cual es el error...

es efectivamente la funcion sumar... aka funciona por q yo le pongo el valos del name o el id del check...pero en mi caso q es dinamico.. yo no se q nombres puede traer desde la base de datos...

function sumar(){
var total = 0;
total+=valorASumar("Producto1");
total+=valorASumar("Producto2");
total+=valorASumar("Producto3");
total+=valorASumar("Producto4");

return Math.round(total*100)/100;

}

como puedo enviarle el valor "id" del checklist a la funcion sumar?? existe alguna forma... quizas con un ciclo..
plx..

Saludos!

dannytm · #6 (**permalink**) 16/03/2010, 11:41

Disculpa, antes la respuesta que te di no es correcta, creía que funcionaba de otra forma.

Lo que tendrás que hacer es otro while en el código Javascript, para que te muestre el total de productos que tienes en la bd. Algo así.

Código PHP:

Ver original$sql_productos = mysql_query("SELECT * FROM clientessubCategoria",$link);

Código Javascript:

Ver originalfunction sumar(){
var total = 0;
var total = <?php echo mysql_num_rows($sql_productos); ?>; //Con esto sacariamos el total de filas que tiene la consulta
for(var i = 1 ; i <= total ; i++){
    total+=valorASumar("Producto"+i);
}
return Math.round(total*100)/100;

Código PHP:

Ver original?>

Prueba y ya me dices.

Saludos!!

dwish · #7 (**permalink**) 16/03/2010, 11:56

La variable "total".. la ocupas para el resultado de la suma y para el numero de resultados de la consulta?
quizas ai te confundiste xd (o yo toy mal? )

mmm creo q entiendo el ciclo.. pero el problema es q los productos no se llaman "Producto1", "Producto2" , etc... tienen distintos nombres...

por ej: celular, audifonos, tarjetas, etc...

en ese caso el ciclo no serviria! D:

dannytm · #8 (**permalink**) 17/03/2010, 07:31

Creía que tenían el nombre de "Producto1" ya que en tu código lo ponía así.

Bueno, ya que tienen otro nombre, te explico, en primer lugar los ids de los checkbox tendrían que tener el nombre del producto, después al realizar el código javascript deberías, con un while, ir sacando los nombres, y así crear todas las filas necesarias.

Código PHP:

Ver original<?php
$sql_productos = mysql_query("SELECT * FROM clientessubCategoria",$link);
?>

Código Javascript:

Ver original<script>
function sumar(){

Código PHP:

Ver original<?php
while($fila=mysql_fetch_array($sql_productos)) {
$nombre = $fila[1];
?>

Código Javascript:

Ver originaltotal+=valorASumar("<?php echo $nombre; ?>");

Código PHP:

Ver original<?php
}
?>

Código Javascript:

Ver originalreturn Math.round(total*100)/100; 
}
</script>

Código PHP:

Ver original<?php
$sql_productos = mysql_query("SELECT * FROM clientessubCategoria",$link);
while($fila=mysql_fetch_array($sql_productos)) {
 
$codigo = $fila[0];
$nombre = $fila[1];
$precio = $fila[5];
 
?>

Código HTML:

<tr>
      <td align="right">Producto1
        <input onClick="ponerValor()" name="<?php echo $nombre; ?>" type="checkbox" id="<?php echo $nombre; ?>" value="100"></td>
      <td><input onChange="ponerValor()" name="cant<?php echo $nombre; ?>" type="text" id="cant<?php echo $nombre; ?>1" value="1" size="3" maxlength="3"></td>
      <td>100</td>
      <td><input name="t<?php echo $nombre; ?>" type="text" id="t<?php echo $nombre; ?>" size="5" maxlength="5"></td>
    </tr>
    <tr>

Código PHP:

<?php } ?>

Prueba y ya me cuentas.

Saludetes!

dwish · #9 (**permalink**) 17/03/2010, 08:21

WOW!! te pasaste!!

yo no estaba muy seguro de usar el php dentro del javascript... xd
pero aprendi algo new!

Muchas gracias dannytm!!!!

>>¡danielwish!<<

dannytm · #10 (**permalink**) 17/03/2010, 14:40

Cita:

Iniciado por dwish

WOW!! te pasaste!!

yo no estaba muy seguro de usar el php dentro del javascript... xd
pero aprendi algo new!

Muchas gracias dannytm!!!!

>>¡danielwish!<<

De nada, me alegra haber sido de utilidad.

Saludos!!