Tablas php y javascript!

cboretto · #1 (**permalink**) 02/08/2010, 12:01

Necesito ayuda! hace 2 semanas que estoy renegando con esto y no encuentro solucion.. A partir de una consulta a la base de datos obtengo una tabla con dos columnas:
1- Producto
2-Precio

Código PHP:

Ver originalrequire_once("lib.php");
$prod=$_POST['busqueda'];
  
   $registro=mysql_query("select * from precios p where p.MedidaNombre  like '%{$_POST['busqueda']}%' ORDER BY MedidaNombre ",$mcon); 
   
    $found = false; 
    $result = '';
    $result .= "<table class='table' border=1>";
    $result .= "<tr> \n";
    $result .= "<td><div class='letra1'><b>PRODUCTO</b></td>";
    $result .= "<td><div class='letra2'><b>PRECIO</b></td>"; 
    $result .= "<td><div class='letra1'><b>CANTIDAD</b></td>";
    $result .= "<td><div class='letra2'><b>PRECIO_TOTAL</b></td>";
    $result .= "<td><div class='letra1'><b>OK</b></td>"; 
    $result .= "</tr> \n";
 
    while ($myrow=mysql_fetch_array($registro))
    {
        $found = true;
        $result .= "<tr class='th'><td class='td'>";
        $result .= "$myrow[MedidaNombre]</td>";
 
        $result .= "<td>";
        $result .= "$"."$myrow[MedidaPrecio]";
        $result .= "</tr>";
        
           
    }
        $result .= "</table>";
      
    mysql_close($mcon);
     
        
        if(!$found) {
 
        echo "No se encontró el producto $prod , intente con otro nombre.";
        echo "<br>";
        echo "<br>";
        echo "<a href=pre.php><u>Nueva Consulta</u></a>"; 
 
                    }else{
 
echo $result;
echo "<br>";
}  
?>

Lo que intento hacer es poner otra columna con una caja de texto donde el usuario ingresa la cantidad.

Ahora la gran pregunta...

¿Como hago para hacer el calculo de precio * cantidad? teniendo en cuenta q el precio es $myrow[MedidaPrecio]

La opcion es usar javascript, para que cada vez que el usuario escribe una cantidad en el campo de texto correspondiente, multiplique y escriba el resultado al lado.

Por favor si alguien sabe como hacerlo me va a ayudar un monton! MUCHAS GRACIAS!

Adler · #2 (**permalink**) 02/08/2010, 15:39

Hola

Al fin te has explicado o yo te he entendido. Loa primero que has de hacer es añadir dos campos por fila. A un hidden le das como valor $myrow[MedidaPrecio], el otro campo un textfield, que será donde el usuario insertará la cantidad. Algo como esto

Código PHP:

Ver original$iCiclo = 0;
 
$result .= "<td>";
$result .= "$"."$myrow[MedidaPrecio]";
$result .= "<input type='hidden' value='"$myrow[MedidaPrecio]"' id='precio_".$iCiclo++."_hidden' name='precio_".$iCiclo++."-hidden' /></tr>";
$result .= "<input type='text' value='' id='precio_".$iCiclo++."' name'precio_".$iCiclo++."' onKeyUp='funcion(this.id, this.value);' />";

El javascript sería algo así

Código Javascript:

Ver originalfunction funcion (id, val) {
var precio = document.getElementById(id+'_hidden').value;
var total = parseInt(precion) * parseInt(val);
alert(total)
}

Suerte

cboretto · #3 (**permalink**) 02/08/2010, 16:48

jajajjaja por fin nos entendimos! Muchisimas gracias! creo q me salvaste despues de tantos intentos!

cboretto · #4 (**permalink**) 03/08/2010, 12:33

Hola Adler.. probe el codigo y no me funciona.. :S
En la funcion javaScript de donde viene val?

Adler · #5 (**permalink**) 03/08/2010, 12:39

Hola

Es el valor que el usuario inserta en el campo cantidad

Suerte

cboretto · #6 (**permalink**) 03/08/2010, 13:36

a vos te funciona bien?

porq lo probe y no hace nada... ingreso la cantidad pero no sale el alert.. :S

Adler · #7 (**permalink**) 03/08/2010, 13:49

Hola

Vamos a comprobar. Con esta función se te ha de levantar una alerta con la id y el valor del campo que has rellenado

Código Javascript:

Ver originalfunction funcion (id, val) {
alert(id + ' - ' + val)
}

Suerte

cboretto · #8 (**permalink**) 03/08/2010, 13:56

El valor del campo lo muestra bien y el id siempre sale 2.

NO se porq con la funcion q me pasaste anteriormente no funciona..

Adler · #9 (**permalink**) 03/08/2010, 14:05

Hola

¿Como que la id es 2? ¿Será precio_2? Y no puede levantar siempre precio_2, algo has de estar haciendo mal

Suerte

cboretto · #10 (**permalink**) 03/08/2010, 14:09

claro precio_2. Por eso te consulte porq el id deberia ir cambiando... eso es lo que estoy tratando de resolver hace varios dias.. no se como hacer para levantar el valor del precio!!! me esta ganando esto!

Adler · #11 (**permalink**) 03/08/2010, 14:17

Hola

A ver muestra el HTML que resulta

Suerte

cboretto · #12 (**permalink**) 03/08/2010, 14:19

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<title>Presupuesto</title>
<link href="CSS2.css" rel="stylesheet" type="text/css" />
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<script language="javascript" type="text/javascript"> 
function funcion (id, val) {
 
alert(id + ' - ' + val)
}
</script>   
</head>
<div align="center">
<table class='table' border=1><tr> 
<td><div class='letra1'><b>PRODUCTO</b></td><td><div class='letra2'><b>PRECIO</b></td><td><div class='letra1'><b>CANTIDAD</b></td><td><div class='letra2'><b>PRECIO_TOTAL</b></td><td><div class='letra1'><b>OK</b></td></tr> 
<tr class='th'><td class='td'>Cable Canal Kalop 100 x 50 </td><td>$21.25<input type='hidden' value='21.25' id='precio_0_hidden' name='precio_1_hidden'/></tr><td><input type='text' value='' id='precio_2' name='precio_3' onKeyUp='funcion(this.id, this.value)'/></tr><td><label name='label'><td> <input type='checkbox' name='si' id='1' /></tr></form><tr class='th'><td class='td'>Cable Canal Kalop 14 x 7  Adhesivo</td><td>$1.15<input type='hidden' value='1.15' id='precio_0_hidden' name='precio_1_hidden'/></tr><td><input type='text' value='' id='precio_2' name='precio_3' onKeyUp='funcion(this.id, this.value)'/></tr><td><label name='label'><td> <input type='checkbox' name='si' id='1' /></tr></form><tr class='th'><td class='td'>Cable Canal Kalop 14 x 7 Standard </td><td>$0.96<input type='hidden' value='0.96' id='precio_0_hidden' name='precio_1_hidden'/></tr><td><input type='text' value='' id='precio_2' name='precio_3' onKeyUp='funcion(this.id, this.value)'/></tr><td><label name='label'><td> <input type='checkbox' name='si' id='1' /></tr></form><tr class='th'><td class='td'>Cable Canal Kalop 18 x 21 Adhesivo</td><td>$2.98<input type='hidden' value='2.98' id='precio_0_hidden' name='precio_1_hidden'/></tr><td><input type='text' value='' id='precio_2' name='precio_3' onKeyUp='funcion(this.id, this.value)'/></tr><td><label name='label'><td> <input type='checkbox' name='si' id='1' /></tr></form><tr class='th'><td class='td'>Cable Canal Kalop 18 x 21 Standard</td><td>$2.34<input type='hidden' value='2.34' id='precio_0_hidden' name='precio_1_hidden'/></tr><td><input type='text' value='' id='precio_2' name='precio_3' onKeyUp='funcion(this.id, this.value)'/></tr><td><label name='label'><td> <input type='checkbox' name='si' id='1' /></tr></form><tr class='th'><td class='td'>Cable Canal Kalop 20 x 10 Adhesivo</td><td>$1.19<input type='hidden' value='1.19' id='precio_0_hidden' name='precio_1_hidden'/></tr><td><input type='text' value='' id='precio_2' name='precio_3' onKeyUp='funcion(this.id, this.value)'/></tr><td><label name='label'><td> <input type='checkbox' name='si' id='1' /></tr></form><tr class='th'><td class='td'>Cable Canal Kalop 20 x 10 Standard</td><td>$1.19<input type='hidden' value='1.19' id='precio_0_hidden' name='precio_1_hidden'/></tr><td><input type='text' value='' id='precio_2' name='precio_3' onKeyUp='funcion(this.id, this.value)'/></tr><td><label name='label'><td> <input type='checkbox' name='si' id='1' /></tr></form><tr class='th'><td class='td'>Cable Canal Kalop 27 x 30 </td><td>$5.92<input type='hidden' value='5.92' id='precio_0_hidden' name='precio_1_hidden'/></tr><td><input type='text' value='' id='precio_2' name='precio_3' onKeyUp='funcion(this.id, this.value)'/></tr><td><label name='label'><td> <input type='checkbox' name='si' id='1' /></tr></form><tr class='th'><td class='td'>Cable Canal Kalop 30 x 30 Ranurado</td><td>$8.08<input type='hidden' value='8.08' id='precio_0_hidden' name='precio_1_hidden'/></tr><td><input type='text' value='' id='precio_2' name='precio_3' onKeyUp='funcion(this.id, this.value)'/></tr><td><label name='label'><td> <input type='checkbox' name='si' id='1' /></tr></form><tr class='th'><td class='td'>Cable Canal Kalop 40 x 16</td><td>$4.01<input type='hidden' value='4.01' id='precio_0_hidden' name='precio_1_hidden'/></tr><td><input type='text' value='' id='precio_2' name='precio_3' onKeyUp='funcion(this.id, this.value)'/></tr><td><label name='label'><td> <input type='checkbox' name='si' id='1' /></tr></form><tr class='th'><td class='td'>Cable Canal Kalop 40 x 30 </td><td>$7.89<input type='hidden' value='7.89' id='precio_0_hidden' name='precio_1_hidden'/></tr><td><input type='text' value='' id='precio_2' name='precio_3' onKeyUp='funcion(this.id, this.value)'/></tr><td><label name='label'><td> <input type='checkbox' name='si' id='1' /></tr></form><tr class='th'><td class='td'>Cable Canal Kalop 50 x 80</td><td>$10.8<input type='hidden' value='10.8' id='precio_0_hidden' name='precio_1_hidden'/></tr><td><input type='text' value='' id='precio_2' name='precio_3' onKeyUp='funcion(this.id, this.value)'/></tr><td><label name='label'><td> <input type='checkbox' name='si' id='1' /></tr></form><tr class='th'><td class='td'>Cable Canal Kalop 95 x 22  Megacanal</td><td>$16.8<input type='hidden' value='16.8' id='precio_0_hidden' name='precio_1_hidden'/></tr><td><input type='text' value='' id='precio_2' name='precio_3' onKeyUp='funcion(this.id, this.value)'/></tr><td><label name='label'><td> <input type='checkbox' name='si' id='1' /></tr></form><tr class='th'><td class='td'>Cable Canal Kalop Color Madera 20 x 10</td><td>$1.82<input type='hidden' value='1.82' id='precio_0_hidden' name='precio_1_hidden'/></tr><td><input type='text' value='' id='precio_2' name='precio_3' onKeyUp='funcion(this.id, this.value)'/></tr><td><label name='label'><td> <input type='checkbox' name='si' id='1' /></tr></form></table><br><form id='form1' name='form1' method='post' action='pre.php'><div align='center'> <input type='button' name='agrego' id='agrego' value='Agregar' /><input type='submit' name='nvo' id='nvo' value='Nueva Consulta' onClick='foco()'/><input type='submit' name='ver' id='ver' value='Ver Presupuesto' /><input type='button' name='cancel' id='cancel' value='Cancelar' onClick=''/></div></form></div>
</body>
</html>

Adler · #13 (**permalink**) 03/08/2010, 14:30

Hola

Ya veo cual es el problema. Esta en el PHP, el ciclo no se comporta como esperaba ya que hay mas de un campo

Prueba ahora

Código PHP:

Ver original$iCiclo = 0;
 
 while ($myrow=mysql_fetch_array($registro))
 
$result .= "<td>";
$result .= "$"."$myrow[MedidaPrecio]";
$result .= "<input type='hidden' value='"$myrow[MedidaPrecio]"' id='precio_".$iCiclo."_hidden' name='precio_".$iCiclo."-hidden' /></tr>";
$result .= "<input type='text' value='' id='precio_".$iCiclo."' name'precio_".$iCiclo."' onKeyUp='funcion(this.id, this.value);' />";
 
 
}
$iCiclo++;
 
        $result .= "</table>";

Si continua dando problemas muestra el HTML

Suerte

cboretto · #14 (**permalink**) 03/08/2010, 14:55

YEAH! ahora si muestra el precio! pero no toma los decimales... o sea que da mal el resultado! pero ya estoy en buen camino! MUCHAS GRACIASSSS!!!!!!

cboretto · #15 (**permalink**) 03/08/2010, 14:57

me alegre antes de tiempo! toma solamente el valor del precio de la primer fila.. si lo hago en las otras sigue multiplicando por el valor de la primera, me entendes?

Adler · #16 (**permalink**) 03/08/2010, 15:03

Muestra el HTML y el campo hidden conviertelo en text

cboretto · #17 (**permalink**) 03/08/2010, 15:08

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<title>Presupuesto</title>
<link href="CSS2.css" rel="stylesheet" type="text/css" />
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<script language="javascript" type="text/javascript"> 
function funcion (id, val) {
var precio = document.getElementById(id+'_text').value;
var total = parseInt(precio) * parseInt(val);
alert(total)
}
</script>   
</head>
<div align="center">
  
 
<table class='table' border=1><tr> 
<td><div class='letra1'><b>PRODUCTO</b></td><td><div class='letra2'><b>PRECIO</b></td><td><div class='letra1'><b>CANTIDAD</b></td><td><div class='letra2'><b>PRECIO_TOTAL</b></td><td><div class='letra1'><b>OK</b></td></tr> 
<tr class='th'><td class='td'>Cable Canal Kalop 100 x 50 </td><td>$21.25<input type='text' value='21.25' id='precio_0_hidden' name='precio_0-hidden' /></tr><td><input type='text' value='' id='precio_0' name'precio_0' onKeyUp='funcion(this.id, this.value)' /></tr><td><label/><td> <input type='checkbox' name='si' id='1' /></tr></form><tr class='th'><td class='td'>Cable Canal Kalop 14 x 7  Adhesivo</td><td>$1.15<input type='text' value='1.15' id='precio_0_hidden' name='precio_0-hidden' /></tr><td><input type='text' value='' id='precio_0' name'precio_0' onKeyUp='funcion(this.id, this.value)' /></tr><td><label/><td> <input type='checkbox' name='si' id='1' /></tr></form><tr class='th'><td class='td'>Cable Canal Kalop 14 x 7 Standard </td><td>$0.96<input type='text' value='0.96' id='precio_0_hidden' name='precio_0-hidden' /></tr><td><input type='text' value='' id='precio_0' name'precio_0' onKeyUp='funcion(this.id, this.value)' /></tr><td><label/><td> <input type='checkbox' name='si' id='1' /></tr></form><tr class='th'><td class='td'>Cable Canal Kalop 18 x 21 Adhesivo</td><td>$2.98<input type='text' value='2.98' id='precio_0_hidden' name='precio_0-hidden' /></tr><td><input type='text' value='' id='precio_0' name'precio_0' onKeyUp='funcion(this.id, this.value)' /></tr><td><label/><td> <input type='checkbox' name='si' id='1' /></tr></form><tr class='th'><td class='td'>Cable Canal Kalop 18 x 21 Standard</td><td>$2.34<input type='text' value='2.34' id='precio_0_hidden' name='precio_0-hidden' /></tr><td><input type='text' value='' id='precio_0' name'precio_0' onKeyUp='funcion(this.id, this.value)' /></tr><td><label/><td> <input type='checkbox' name='si' id='1' /></tr></form><tr class='th'><td class='td'>Cable Canal Kalop 20 x 10 Adhesivo</td><td>$1.19<input type='text' value='1.19' id='precio_0_hidden' name='precio_0-hidden' /></tr><td><input type='text' value='' id='precio_0' name'precio_0' onKeyUp='funcion(this.id, this.value)' /></tr><td><label/><td> <input type='checkbox' name='si' id='1' /></tr></form><tr class='th'><td class='td'>Cable Canal Kalop 20 x 10 Standard</td><td>$1.19<input type='text' value='1.19' id='precio_0_hidden' name='precio_0-hidden' /></tr><td><input type='text' value='' id='precio_0' name'precio_0' onKeyUp='funcion(this.id, this.value)' /></tr><td><label/><td> <input type='checkbox' name='si' id='1' /></tr></form><tr class='th'><td class='td'>Cable Canal Kalop 27 x 30 </td><td>$5.92<input type='text' value='5.92' id='precio_0_hidden' name='precio_0-hidden' /></tr><td><input type='text' value='' id='precio_0' name'precio_0' onKeyUp='funcion(this.id, this.value)' /></tr><td><label/><td> <input type='checkbox' name='si' id='1' /></tr></form><tr class='th'><td class='td'>Cable Canal Kalop 30 x 30 Ranurado</td><td>$8.08<input type='text' value='8.08' id='precio_0_hidden' name='precio_0-hidden' /></tr><td><input type='text' value='' id='precio_0' name'precio_0' onKeyUp='funcion(this.id, this.value)' /></tr><td><label/><td> <input type='checkbox' name='si' id='1' /></tr></form><tr class='th'><td class='td'>Cable Canal Kalop 40 x 16</td><td>$4.01<input type='text' value='4.01' id='precio_0_hidden' name='precio_0-hidden' /></tr><td><input type='text' value='' id='precio_0' name'precio_0' onKeyUp='funcion(this.id, this.value)' /></tr><td><label/><td> <input type='checkbox' name='si' id='1' /></tr></form><tr class='th'><td class='td'>Cable Canal Kalop 40 x 30 </td><td>$7.89<input type='text' value='7.89' id='precio_0_hidden' name='precio_0-hidden' /></tr><td><input type='text' value='' id='precio_0' name'precio_0' onKeyUp='funcion(this.id, this.value)' /></tr><td><label/><td> <input type='checkbox' name='si' id='1' /></tr></form><tr class='th'><td class='td'>Cable Canal Kalop 50 x 80</td><td>$10.8<input type='text' value='10.8' id='precio_0_hidden' name='precio_0-hidden' /></tr><td><input type='text' value='' id='precio_0' name'precio_0' onKeyUp='funcion(this.id, this.value)' /></tr><td><label/><td> <input type='checkbox' name='si' id='1' /></tr></form><tr class='th'><td class='td'>Cable Canal Kalop 95 x 22  Megacanal</td><td>$16.8<input type='text' value='16.8' id='precio_0_hidden' name='precio_0-hidden' /></tr><td><input type='text' value='' id='precio_0' name'precio_0' onKeyUp='funcion(this.id, this.value)' /></tr><td><label/><td> <input type='checkbox' name='si' id='1' /></tr></form><tr class='th'><td class='td'>Cable Canal Kalop Color Madera 20 x 10</td><td>$1.82<input type='text' value='1.82' id='precio_0_hidden' name='precio_0-hidden' /></tr><td><input type='text' value='' id='precio_0' name'precio_0' onKeyUp='funcion(this.id, this.value)' /></tr><td><label/><td> <input type='checkbox' name='si' id='1' /></tr></form></table><br><form id='form1' name='form1' method='post' action='pre.php'><div align='center'> <input type='button' name='agrego' id='agrego' value='Agregar' /><input type='submit' name='nvo' id='nvo' value='Nueva Consulta' onClick='foco()'/><input type='submit' name='ver' id='ver' value='Ver Presupuesto' /><input type='button' name='cancel' id='cancel' value='Cancelar' onClick=''/></div></form></div>
</body>
</html>

GRACIAS POR LA PACIENCIA!

Adler · #18 (**permalink**) 03/08/2010, 15:23

Hola

La función js es esta. No hay ningún campo con sufijo text sino hidden. También está solucionado la cuestión de los decimales

Código Javascript:

Ver originalfunction funcion (id, val) {
var precio = document.getElementById(id+'_hidden').value;
var total = (parseFloat(precio * val)).toFixed(2);
alert(total)
}

Ahora corrijo mi error

Código PHP:

Ver original$iCiclo = 0;
 
 while ($myrow=mysql_fetch_array($registro))
 
$result .= "<td>";
$result .= "$"."$myrow[MedidaPrecio]";
$result .= "<input type='hidden' value='"$myrow[MedidaPrecio]"' id='precio_".$iCiclo."_hidden' name='precio_".$iCiclo."_hidden' /></tr>";
$result .= "<input type='text' value='' id='precio_".$iCiclo."' name'precio_".$iCiclo."' onKeyUp='funcion(this.id, this.value);' />";
 
$iCiclo++; 
}
 
$result .= "</table>";

Suerte

Y ahora me voy a la cama

cboretto · #19 (**permalink**) 04/08/2010, 08:13

Muchas gracias Adler! estaba muy trabada con eso, me ayudaste un monton! Gracias!