Problema al multiplicar valor de checkbox con valor de un select

douglasroos · #1 (**permalink**) 26/04/2010, 09:11

Saludos a todos, tengo un problema con un codigo para multiplicar unos valores, la cuestion es que traigo un listado de productos desde una bd, con un while genero la lista, al clickear un checkbox suma o resta el precio de cada producto, hasta ahi todo bien, el problema surge cuando creo la funcion para multiplcar ya que apenas me estoy introduciendo en el javascript, cuando cliqueo el checkbox y selecciono del combobox la cantidad de productos, en vez de multiplicar precio x cantidad multiplica precio x precio tantas veces como se haya seleccionado en el combobox, es decir lo eleva a la potencia.

Necesito que si selecciono 4 multiplique por 4 y si selecciono 2 solo multiplique por 2.

aca les dejo el codigo

Código Javascript:

Ver original<script>
var total=0;
function sumar(valor) {
total += valor; 
document.f1.total.value=Math.round(total * 100) / 100;
}
 
function restar(valor) {
total-=valor; 
document.f1.total.value=Math.round(total * 100) / 100;
}
 
function multiplica(valor) {
total*= valor; 
document.f1.total.value=Math.round(total * 100) / 100;
}
 
function dividir(valor) {
total/=valor; 
document.f1.total.value=Math.round(total * 100) / 100;
}
 
function comparar(){
   var a = parseInt(<?php echo $gastar; ?>);
   var b = parseInt(document.f1.total.value);
   if (a<=b) {
      alert('Haz alcanzado el monto máximo para tu pedido, por favor elimina algunos productos de tu selección');return false;
   }
}
</script>

y aqui el codigo del listado

Código HTML:

Ver original<form action="procesar_pedido1.php" method="post" name="f1" id="f1"><p>

Código PHP:

Ver original<?php
                    
require('conexion.php');
$csql = "SELECT * FROM productos where existencia='SI' order by codigo ASC";
$ress = mysql_query($csql,$conn);                   
if (mysql_num_rows($ress)!=0){
 
while($row = mysql_fetch_array($ress)) {    
$codigo = $row["codigo"];
$producto = $row["producto"];
$precio = $row["precio"];
$cantidad = $row["cantidad"];
 
 
?>

Código Javascript:

Ver original<script language="javascript">
function deshabilita(codigo)
 
      {
 
          if (document.getElementById("pedido" + codigo).checked) {
 
              document.getElementById("cantidad" +codigo).disabled = false;
 
          } else {
 
              document.getElementById("cantidad" +codigo).disabled = true;
 
          }
  
      }
      
</script>

Código PHP:

Ver original<?php
 
$c=$c+1;
if($c%2==0) //si el residuo es 0 la pintamos de un color
$bgc='#DFDFDF';
else //sino la pintamos de otro
$bgc='#EEEEEE'; 
 
echo"<tr bgcolor=$bgc height=20 class=Estilo5><td><center>$codigo</td><td><center>$producto</td><td><center><input type='checkbox' name='pedido".$codigo."' id='pedido".$codigo."' value='".$precio."' onClick='if (this.checked) sumar(".$precio."); else restar(".$precio.");comparar();deshabilita(\"$codigo\");'></td><td><center><select id='cantidad".$codigo."' name='cantidad".$codigo."' onchange='if (this.change) dividir(".$precio."); else multiplica(".$precio.");'disabled><option selected='selected'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select></td><td><center>$precio</td></tr>";
 
echo"<input type='hidden' name='codigo".$codigo."' value='".$codigo."'>";
echo"<input type='hidden' name='producto".$codigo."' value='".$producto."'>";
echo"<input type='hidden' name='precio".$codigo."' value='".$precio."'>";
 
 
 
 
 } }
 ?>

Código HTML:

Ver original</p>
              
                  
              </table>
              <p align="right">Total: <input type=text name=total value=0 id="total" class="user">
              <input type="hidden" name="cantidad" value="<?php echo $cantidad; ?>" />
              <input type="hidden" name="codigo" value="<?php echo $codigo; ?>" />
              <input type="hidden" name="cesta" value="<?php echo $cesta; ?>"> 
              <input type="hidden" name="gastar1" value="<?php echo $gastar; ?>" />
          <div align="left"><input type="image" name="pedido3" width="125" height="105" src="imagenes/caja-registradora.png" align="middle" /></div></p>
              </div>
              </form>

eso es todo el codigo del listado, agradezco toda la ayuda que me puedan prestar

sweetlydark · #2 (**permalink**) 26/04/2010, 09:52

De lo visto no muestras el código javascript donde surge el problema. No veo por ningún parte de ese código donde intentas multiplicar precio por cantidad. Solo tienes esta función de multiplicación:

Código:

function multiplica(valor) {
  total*= valor; 
  document.f1.total.value=Math.round(total * 100) / 100;
}

El cual multiplica el valor dado por la llamada con el variable total y luego lo asigna a un elemento luego de redondearla. Que no es lo que quieres hacer a menos que total siempre es alterado a la cantidad y valor es el precio pero lo veo sujeto a muchos errores ya que no se ve por donde total recoge su valor entre otras cosas.

douglasroos · #3 (**permalink**) 26/04/2010, 10:04

precisamente no se nada de javascript, estaba intentando hacer la multiplicacion, si pudieras darme una funcion que sirva te lo agradeceria enormemente

abimaelrc · #4 (**permalink**) 26/04/2010, 10:14

En ese caso te recomiendo que leas algún manual para que puedas lograrlo, aquí hay uno para que puedas empezar http://w3schools.com/js/default.asp y como dice caricatos El abc de los formularios.

sweetlydark · #5 (**permalink**) 26/04/2010, 10:23

Muy buenos recursos con eso deberias poder hacer el funcion que necesitas especialmente si escribistes lo que ya tienes.

Lo unico que necesitas para hacer lo que quieres es un funcion que recoge el cantidad de articulos (lo cual no veo en el tuyo) y el precio luego que multiplique ambos. Para darte un idea.

douglasroos · #6 (**permalink**) 26/04/2010, 15:25

muchas gracias he hecho esto, sin embargo aún no funciona correctamente

no importa cual seleccione todos valen 27, que es el valor del ultimo producto en la lista, ese lo multiplica perfecto pero cuando trato de agregarle otro producto dandole al checkbox se pierde la multiplicacion y solo cuenta el valor unitario.

aqui les dejo el codigo a ver si me pueden ayudar, que tengo que entregar esto el miercoles

Código HTML:

Ver original<form action="procesar_pedido1.php" method="post" name="f1" id="f1"  onsubmit="return validar()">
            <div align="center">
            <p align="left" class="user"></p>
            <table width="680" border="1" align="center" cellpadding="1" cellspacing="1">
                  <tr>
                    <td height="29"><center class="Estilo4">
                      <b class="Estilo5">C&oacute;digo</b></center>                  </td>
                    <td height="29"><center class="Estilo4">
                      <b class="Estilo5">Producto</b></center>                  </td>
                    <td><center class="Estilo4">
                      <b class="Estilo5">Pedido</b>
                    </center>                  </td>
                    <td><center class="Estilo4">
                      <b class="Estilo5">Cantidad</b>
                    </center></td>
                     <td><center class="Estilo4">
                      <b class="Estilo5">Precio Unitario</b>
                    </center></td>
                </tr>
 
                  <p>

Código PHP:

Ver original<?php
                    
require('conexion.php');
$csql = "SELECT * FROM productos where existencia='SI' order by codigo ASC";
$ress = mysql_query($csql,$conn);                   
if (mysql_num_rows($ress)!=0){
 
while($row = mysql_fetch_array($ress)) {    
$codigo = $row["codigo"];
$producto = $row["producto"];
$precio = $row["precio"];
$cantidad = $row["cantidad"];
$caracter = $row["caracter"];
?>

Código Javascript:

Ver original<script language="javascript">
function deshabilita(codigo)
 
      {
 
          if (document.getElementById("pedido" + codigo).checked) {
 
              document.getElementById("cantidad" +codigo).disabled = false;
 
          } else {
 
              document.getElementById("cantidad" +codigo).disabled = true;
 
          }
  
      }
      
      function validar() {
        var f = document.f1
        var sw = false;
        
        for (i=0; i < f.pedido<?php echo $codigo; ?>.length; i++) {
            if (f.pedido<?php echo $codigo; ?>[i].checked == true) {
                sw = true;
            }
        }
        
        if (sw == false) {
            alert("No puedes enviar el pedido en blanco")
            return false
        }
        
        return true
    }
    
function multiplica(){
    var precio = document.getElementById("pedido<?php echo $codigo; ?>");
    var multiplicador = parseInt(document.getElementById("cantidad<?php echo $codigo; ?>").value, 10);
    document.f1.total.value = multiplicador*parseInt(precio.value, 10);
}   
</script>

Código PHP:

Ver original<?php
 
$c=$c+1;
if($c&#37;2==0) //si el residuo es 0 la pintamos de un color
$bgc='#DFDFDF';
else //sino la pintamos de otro
$bgc='#EEEEEE'; 
 
echo"<tr bgcolor=$bgc height=20 class=Estilo5><td><center>$codigo</td><td><center>$producto</td><td><center><input type='checkbox' name='pedido".$codigo."' id='pedido".$codigo."' value='".$precio."' onClick='if (this.checked) sumar(".$precio."); else restar(".$precio.");comparar();deshabilita(\"$codigo\");'></td><td><center><select id='cantidad".$codigo."' name='cantidad".$codigo."' onChange='multiplica(this);' disabled><option selected='selected'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select></td><td><center>$precio</td></tr>";
 
echo"<input type='hidden' name='codigo".$codigo."' value='".$codigo."'>";
echo"<input type='hidden' name='producto".$codigo."' value='".$producto."'>";
echo"<input type='hidden' name='precio".$codigo."' value='".$precio."'>";
 
 
 
 
 } }
 ?>

douglasroos · #7 (**permalink**) 26/04/2010, 17:18

se que molesto pero es que me urge esta funcion, si alguien sabe por favor que me diga.

sweetlydark · #8 (**permalink**) 29/04/2010, 16:44

Seria mucho mas fácil si el código que facilite, pudiera producir el error.

Pero, no nos proporciona ni los checkbox, ni el combo donde esta surgiendo el error.

Solo nos muestra código php que no sirve de nada (el error nos esta allí -sino esto estuviese en ese foro- y no tenemos como probarlo sin tu banco de datos y un poco mas de código), html que solo nos da unos input escondidos o la parte superior de una tabla. Por ultimo código js que funciona tal y como esta escrita.

Perdón pero el código js que colocaste funciona de lo mas bien. Claro eso es si el formulario que no has colocado esta bien y que el código php este bien.

douglasroos · #9 (**permalink**) 06/05/2010, 22:22

Muchas gracias por tu respuesta, no habia respondido antes ya que estaba de viaje.

aca pongo el codigo HTML para que veas que no me funciona como lo espero.

Código HTML:

Ver original<form action="procesar_pedido1.php" method="post" name="f1" id="f1"  onsubmit="return validar()">
            <div align="center">
            <p align="left" class="user"></p>
            <table width="680" border="1" align="center" cellpadding="1" cellspacing="1">
                  <tr>
                    <td height="29"><center class="Estilo4">
                      <b class="Estilo5">C&oacute;digo</b></center>                  </td>
 
                    <td height="29"><center class="Estilo4">
                      <b class="Estilo5">Producto</b></center>                  </td>
                    <td><center class="Estilo4">
                      <b class="Estilo5">Pedido</b>
                    </center>                  </td>
                    <td><center class="Estilo4">
                      <b class="Estilo5">Cantidad</b>
 
                    </center></td>
                     <td><center class="Estilo4">
                      <b class="Estilo5">Precio</b>
                    </center></td>
                </tr>
 
                  <p>
                    <script language="javascript">
function deshabilita(codigo)
 
      {
 
          if (document.getElementById("pedido" + codigo).checked) {
 
              document.getElementById("cantidad" +codigo).disabled = false;
 
          } else {
 
              document.getElementById("cantidad" +codigo).disabled = true;
 
          }
  
      }
      
 
function multiplica(){
 
    var precio = document.getElementById("pedido5");
 
    var multiplicador = parseInt(document.getElementById("cantidad5").value, 10);
 
    document.f1.total.value = multiplicador*parseInt(precio.value, 10);
 
}       
</script>
 
<tr bgcolor=#EEEEEE height=20 class=Estilo5><td><center>5</td><td><center>solomo</td><td><center><input type='checkbox' name='pedido5' id='pedido5' value='27' onClick='if (this.checked) sumar(27); else restar(27);comparar();deshabilita("5");'></td><td><center><select name='cantidad5' id='cantidad5' onchange='multiplica()' disabled><option selected>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select></td><td><center>27</td></tr><input type='hidden' name='codigo5' value='5'><input type='hidden' name='producto5' value='solomo'><input type='hidden' name='precio5' value='27'><input type='hidden' name='gastar' value=''><script language="javascript">
function deshabilita(codigo)
 
      {
 
          if (document.getElementById("pedido" + codigo).checked) {
 
              document.getElementById("cantidad" +codigo).disabled = false;
 
          } else {
 
              document.getElementById("cantidad" +codigo).disabled = true;
 
          }
  
      }
      
 
function multiplica(){
 
    var precio = document.getElementById("pedido2");
 
    var multiplicador = parseInt(document.getElementById("cantidad2").value, 10);
 
    document.f1.total.value = multiplicador*parseInt(precio.value, 10);
 
}       
</script>
 
<tr bgcolor=#DFDFDF height=20 class=Estilo5><td><center>2</td><td><center>tomates</td><td><center><input type='checkbox' name='pedido2' id='pedido2' value='28.00' onClick='if (this.checked) sumar(28.00); else restar(28.00);comparar();deshabilita("2");'></td><td><center><select name='cantidad2' id='cantidad2' onchange='multiplica()' disabled><option selected>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select></td><td><center>28.00</td></tr><input type='hidden' name='codigo2' value='2'><input type='hidden' name='producto2' value='tomates'><input type='hidden' name='precio2' value='28.00'><input type='hidden' name='gastar' value=''><script language="javascript">
function deshabilita(codigo)
 
      {
 
          if (document.getElementById("pedido" + codigo).checked) {
 
              document.getElementById("cantidad" +codigo).disabled = false;
 
          } else {
 
              document.getElementById("cantidad" +codigo).disabled = true;
 
          }
  
      }
      
 
function multiplica(){
 
    var precio = document.getElementById("pedido1");
 
    var multiplicador = parseInt(document.getElementById("cantidad1").value, 10);
 
    document.f1.total.value = multiplicador*parseInt(precio.value, 10);
 
}       
 
</script>
 
<tr bgcolor=#EEEEEE height=20 class=Estilo5><td><center>1</td><td><center>galletas</td><td><center><input type='checkbox' name='pedido1' id='pedido1' value='8.00' onClick='if (this.checked) sumar(8.00); else restar(8.00);comparar();deshabilita("1");'></td><td><center><select name='cantidad1' id='cantidad1' onchange='multiplica()' disabled><option selected>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select></td><td><center>8.00</td></tr><input type='hidden' name='codigo1' value='1'><input type='hidden' name='producto1' value='galletas'><input type='hidden' name='precio1' value='8.00'><input type='hidden' name='gastar' value=''><script language="javascript">
function deshabilita(codigo)
 
      {
 
          if (document.getElementById("pedido" + codigo).checked) {
 
              document.getElementById("cantidad" +codigo).disabled = false;
 
          } else {
 
              document.getElementById("cantidad" +codigo).disabled = true;
 
          }
  
      }
      
 
function multiplica(){
 
    var precio = document.getElementById("pedido3");
 
    var multiplicador = parseInt(document.getElementById("cantidad3").value, 10);
 
    document.f1.total.value = multiplicador*parseInt(precio.value, 10);
 
}       
</script>
 
<tr bgcolor=#DFDFDF height=20 class=Estilo5><td><center>3</td><td><center>harina pan</td><td><center><input type='checkbox' name='pedido3' id='pedido3' value='2.70' onClick='if (this.checked) sumar(2.70); else restar(2.70);comparar();deshabilita("3");'></td><td><center><select name='cantidad3' id='cantidad3' onchange='multiplica()' disabled><option selected>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select></td><td><center>2.70</td></tr><input type='hidden' name='codigo3' value='3'><input type='hidden' name='producto3' value='harina pan'><input type='hidden' name='precio3' value='2.70'><input type='hidden' name='gastar' value=''><script language="javascript">
function deshabilita(codigo)
 
      {
 
          if (document.getElementById("pedido" + codigo).checked) {
 
              document.getElementById("cantidad" +codigo).disabled = false;
 
          } else {
 
              document.getElementById("cantidad" +codigo).disabled = true;
 
          }
  
      }
      
 
function multiplica(){
 
    var precio = document.getElementById("pedido4");
 
    var multiplicador = parseInt(document.getElementById("cantidad4").value, 10);
 
    document.f1.total.value = multiplicador*parseInt(precio.value, 10);
 
}       
 
</script>
 
<tr bgcolor=#EEEEEE height=20 class=Estilo5><td><center>4</td><td><center>leche en polvo</td><td><center><input type='checkbox' name='pedido4' id='pedido4' value='15.78' onClick='if (this.checked) sumar(15.78); else restar(15.78);comparar();deshabilita("4");'></td><td><center><select name='cantidad4' id='cantidad4' onchange='multiplica()' disabled><option selected>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select></td><td><center>15.78</td></tr><input type='hidden' name='codigo4' value='4'><input type='hidden' name='producto4' value='leche en polvo'><input type='hidden' name='precio4' value='15.78'><input type='hidden' name='gastar' value=''>
                  </p>
              
                  
              </table>
              <p align="right">Total: <input type=text name=total value=0 id="total" class="user">
 
              <input type="hidden" name="cantidad" value="" />
              <input type="hidden" name="codigo" value="4" />
              <input type="hidden" name="cesta" value=""> 
              <input type="hidden" name="gastar1" value="" />
          <div align="left"><input type="submit" name="pedido3" value="Enviar pedido" align="middle"></div></p>
              </div>
              </form>

El codigo no me funciona como yo quiero, cuando selecciono cualquiera habilita el select pero no multiplica, solo multiplica el ultimo de los select, y en cuanto habilito otro check entonces no me suma ese valor a la multiplicacion sino que la reemplaza y coloca el precio original. Si me pudieras ayudar te lo agradeceria enormemente, entregue el sistema sin eso y me lo estan pidiendo pero por mas que lo intento no me sale. Muchas gracias desde ya

sweetlydark · #10 (**permalink**) 07/05/2010, 09:12

Lo primer que observo es que tiene 5 funciones de multiplicar (y deshabilitar) y todos llamados iguales. ¿Como sabe tu codigo cual llamar? Veo que lo colocaste cada uno debajo de uno de lo seleciones pero esto no haces nada para tu codigo.

El no va a ejecutar el que quede mas cerca, los funciones no trabajan asi. Puedes colocarlo donde sea en tu codigo y por lo general llamarlo de donde quiera. Lo que esta pasando es que el navegador esta leyendo todo los funciones de multiplicar pero el que se queda en memoria es el ultimo que leyo con el mismo nombre.

El de desabilitar funciona porque le pasas el valor del select que hay que desabilitar pero el de multiplicar no es asi y esta escrita para trabajar con uno de los opciones (el ultimo en este caso).

Los funciones estan hechos para eliminar codigo redundante osea si tienes varios lugares donde tienes que multiplicar algo en vez de escribir el codigo de multiplicacion 20 veces. Escribes un funcion que puedes llamar las veces necesarias.

Sugiero que colocas solo un funcion de deshabilitar y solo uno de multiplicar. Al de multiplicacion le pasas lo valores pertinentes (en este caso puedes pasar los id).

Código:

function multiplica(id,id2){
 
    var precio = document.getElementById(id);

    var multiplicador = parseInt(document.getElementById(id2).value, 10);

    document.f1.total.value = multiplicador*parseInt(precio.value, 10);
 
}

douglasroos · #11 (**permalink**) 07/05/2010, 10:16

gracias por responder tan pronto, lo que pasa es que estoy muy crudo en javascript, hice lo que me sugeriste pero no me funciona, podrias ayudarme? y disculpa el abuso de verdad.

sweetlydark · #12 (**permalink**) 08/05/2010, 09:07

Cambiastes las llamadas a la funcion para incluir los ids? Te sale un error en tu navegador?

http://www.ulpgc.es/otros/tutoriales...cript/cap5.htm

douglasroos · #13 (**permalink**) 08/05/2010, 11:23

Muchas gracias ahora me funciona a la perfección, el unico detalle es que si el precio es de 2.70 entonces al multiplicar no toma el .70 y me dice que es 4 en ves de decir que es 5.4. que será? intente cambiando el 10 que esta despues de value en la funcion pero hace lo mismo.

Muchas gracias de verdad por el apoyo

Edito: cuando selecciono varios no suma correctamente. ni resta tampoco.

sweetlydark · #14 (**permalink**) 08/05/2010, 16:02

En el enlace q te di Lea sobre el funcion parseint que estas usando y parsefloat.

douglasroos · #15 (**permalink**) 08/05/2010, 16:17

jeje se que molesto, ya me multiplica a la perfección, ahora el detalle es sumar ese resultado a los demas precios. tendre que decirle a la funcion suma y resta que en vez de sumarle el value del checkbox sumen el total? o algo asi? esta funcion me tiene patas arriba.

gracias de antemano

douglasroos · #16 (**permalink**) 08/05/2010, 22:23

asi lo tengo ahora

Código Javascript:

Ver originalfunction multiplica(pedido<?php echo $codigo;?>,cantidad<?php echo $codigo;?>){
 
    var precio = document.getElementById(pedido<?php echo $codigo;?>);
 
    var multiplicador = parseFloat(document.getElementById(cantidad<?php echo $codigo;?>).value, 10);
 
    document.f1.total.value = multiplicador*Math.round(precio.value * 100) / 100;
 
}

Código HTML:

Ver original<select name='cantidad".$codigo."' id='cantidad".$codigo."' onchange='multiplica(\"pedido$codigo\",\"cantidad$codigo\")' disabled><option selected>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select>

sweetlydark · #17 (**permalink**) 10/05/2010, 09:54

Cita:

Iniciado por douglasroos

ahora el detalle es sumar ese resultado a los demas precios. tendre que decirle a la funcion suma y resta que en vez de sumarle el value del checkbox sumen el total?
gracias de antemano

Estas correcto.