Foros del Web » Programando para Internet » Javascript »

Varias multiplicaciones en distintos forms

 Estas en el tema de Varias multiplicaciones en distintos forms en el foro de Javascript en Foros del Web. Gente, quisiera poner varias líneas dentro de un mismo formulario en las cuales se realicen multiplicaciones y aparezca el resultado automaticamente. Tengo este código en ...
  #1 (permalink)  
Antiguo 02/02/2009, 02:06
 
Fecha de Ingreso: septiembre-2004
Mensajes: 203
Antigüedad: 20 años, 1 mes
Puntos: 0
Varias multiplicaciones en distintos forms
Gente, quisiera poner varias líneas dentro de un mismo formulario en las cuales se realicen multiplicaciones y aparezca el resultado automaticamente. Tengo este código en el que funciona solo en la primera linea, en la 2da ya no aparece el resultado:

Código HTML:
<html>
<head>

<SCRIPT>
function multiplicar(){
m1 = document.getElementById("multiplicando").value;
m2 = document.getElementById("multiplicador").value;
r = m1*m2;
document.getElementById("resultado").value = r;
} 
</SCRIPT>
</head>

<body>
<form id="multiplicar">
<input name="1" type="text" id="multiplicando" onChange="multiplicar();" value=0> 
X
<input name="2" type="text" id="multiplicador" onChange="multiplicar();" value=0> 
=
<input name="3" type="text" id="resultado">

<br><br>

<input name="1" type="text" id="multiplicando1" onChange="multiplicar();" value=0> 
X
<input name="2" type="text" id="multiplicador1" onChange="multiplicar();" value=0> 
=
<input name="3" type="text" id="resultado1">

</form> 

</body>
</html>
Lo intenté asignando valores de 'Id' distintos, con los mismos y nada, solo funciona la primera.
Alguien puede darme una mano?
Muchismas gracias

Leo
__________________
Impala
  #2 (permalink)  
Antiguo 02/02/2009, 03:04
Avatar de ceSharp  
Fecha de Ingreso: octubre-2008
Ubicación: Madrid
Mensajes: 495
Antigüedad: 16 años
Puntos: 66
Respuesta: Varias multiplicaciones en distintos forms
hola impala,

habrá muuchas maneras de crearte tu propia calculadora, el caso es buscar la forma mas genérica de hacerlo. Esta sería una manera:

(javascript)
<script type="text/javascript">

function multiplicar(id){
m1 = document.getElementById('multiplicando' + id).value;
m2 = document.getElementById('multiplicador' + id).value;
r = m1*m2;
document.getElementById('resultado' + id).value = r;
}
</script>

(html)
<html>
<head><title>xxx</title>
</head>
<html>
<body>
<input name="1" type="text" id="multiplicando1" onchange="multiplicar(1)" value="0"/>
X
<input name="2" type="text" id="multiplicador1" onchange="multiplicar(1);" value="0"/>
=
<input name="3" type="text" id="resultado1"/>
<br>
<br>
<input name="1" type="text" id="multiplicando2" onchange="multiplicar(2);" value="0"/>
X
<input name="2" type="text" id="multiplicador2" onchange="multiplicar(2);" value="0"/>
=
<input name="3" type="text" id="resultado2"/>
</body>
</html>

Los id de cada linea de multiplicacion (multiplicando, multiplicador y resultado) se van numerando y cuando llamas a la función js lo haces pasando como parametro el número de linea. De esta manera tienes una única función js y lo que varías es el numero de linea del que tiene que cazar ids y hacer operaciones.

Salu2
  #3 (permalink)  
Antiguo 02/02/2009, 03:09
 
Fecha de Ingreso: septiembre-2004
Mensajes: 203
Antigüedad: 20 años, 1 mes
Puntos: 0
Respuesta: Varias multiplicaciones en distintos forms
Muchisimas, pero muchisimas gracias !!! La verdad es que me salvaste porque no sé casi nada de JavaScript y estaba atascadísimo !
Gracias de nuevo
__________________
Impala
  #4 (permalink)  
Antiguo 02/02/2009, 03:26
 
Fecha de Ingreso: septiembre-2004
Mensajes: 203
Antigüedad: 20 años, 1 mes
Puntos: 0
Respuesta: Varias multiplicaciones en distintos forms
Si no es mucho abusar, hay alguna manera de que los resultados que irían apareciendo en resultado1, resultado2, resultado3 ... se vayan sumando automaticamente?
Yo tengo este código, pero no me funciona:

Código HTML:
function suma(){
numero1 = parseFloat(document.getElementById("importe1").value); 
numero2 = parseFloat(document.getElementById("importe2").value);
numero3 = parseFloat(document.getElementById("importe3").value); 
numero4 = parseFloat(document.getElementById("importe4").value);
numero5 = parseFloat(document.getElementById("importe5").value); 
numero6 = parseFloat(document.getElementById("importe6").value);
resultado = numero1 + numero2 + numero3 + numero4 + numero5 + numero6; 
document.getElementById("subtotal").value = resultado;
}

<table>
        <tr>
          <td align="left" valign="top"><table width="650" height="519" border="0" class="tabla">
              <tr bgcolor="#CCCCCC">
                <td height="20" align="left" valign="top" class="texto_forms1"><div align="center">cantidad</div></td>
                <td align="left" valign="top" class="texto_forms1"><div align="center">concepto</div></td>
                <td align="left" valign="top" class="texto_forms1"><div align="center">m2/ml</div></td>
                <td align="left" valign="top" class="texto_forms1"><div align="center">importe</div></td>
              </tr>
              <tr>
                <td width="60" height="70" align="left" valign="top" class="texto_forms1"><input name="cantidad1" type="text" class="estilocampofacturacantidad" id="cantidad1" onChange="multiplicar(1);" /></td>
                <td width="422" align="left" valign="top" class="texto_forms1"><textarea name="concepto1" class="estilotextareafactura" id="concepto1"></textarea></td>
                <td width="60" align="left" valign="top" class="texto_forms1"><input name="ml1" type="text" class="estilocampofacturacantidad" id="ml1" onChange="multiplicar(1);" /></td>
                <td width="90" align="left" valign="top" class="texto_forms1"><input name="importe1" type="text" class="estilocampofacturaimporte" id="importe1" onChange="suma();"/></td>
              </tr>
              <tr>
                <td height="70" align="left" valign="top" class="texto_forms1"><input name="cantidad2" type="text" class="estilocampofacturacantidad" id="cantidad2"  onChange="multiplicar();"/></td>
                <td align="left" valign="top" class="texto_forms1"><textarea name="concepto2" class="estilotextareafactura" id="concepto2"></textarea></td>
                <td align="left" valign="top" class="texto_forms1"><input name="ml2" type="text" class="estilocampofacturacantidad" id="ml2"  onChange="multiplicar(2);" /></td>
                <td align="left" valign="top" class="texto_forms1"><input name="importe2" type="text" class="estilocampofacturaimporte" id="importe2" onChange="suma();"/></td>
              </tr>
              <tr>
                <td height="70" align="left" valign="top" class="texto_forms1"><input name="cantidad3" type="text" class="estilocampofacturacantidad" id="cantidad3"  onChange="multiplicar(3);"/></td>
                <td align="left" valign="top" class="texto_forms1"><textarea name="concepto3" class="estilotextareafactura" id="concepto3"></textarea></td>
                <td align="left" valign="top" class="texto_forms1"><input name="ml3" type="text" class="estilocampofacturacantidad" id="ml3"  onChange="multiplicar(3);"/></td>
                <td align="left" valign="top" class="texto_forms1"><input name="importe3" type="text" class="estilocampofacturaimporte" id="importe3" onChange="suma();"/></td>
              </tr>
              <tr>
                <td height="70" align="left" valign="top" class="texto_forms1"><input name="cantidad4" type="text" class="estilocampofacturacantidad" id="cantidad4"  onChange="multiplicar(4);"/></td>
                <td align="left" valign="top" class="texto_forms1"><textarea name="concepto4" class="estilotextareafactura" id="concepto4"></textarea></td>
                <td align="left" valign="top" class="texto_forms1"><input name="ml4" type="text" class="estilocampofacturacantidad" id="ml4"  onChange="multiplicar(4);"/></td>
                <td align="left" valign="top" class="texto_forms1"><input name="importe4" type="text" class="estilocampofacturaimporte" id="importe4" onChange="suma();"/></td>
              </tr>
              <tr>
                <td height="70" align="left" valign="top" class="texto_forms1"><input name="cantidad5" type="text" class="estilocampofacturacantidad" id="cantidad5"  onChange="multiplicar(5);"/></td>
                <td align="left" valign="top" class="texto_forms1"><textarea name="concepto5" class="estilotextareafactura" id="concepto5"></textarea></td>
                <td align="left" valign="top" class="texto_forms1"><input name="ml5" type="text" class="estilocampofacturacantidad" id="ml5"  onChange="multiplicar(5);"/></td>
                <td align="left" valign="top" class="texto_forms1"><input name="importe5" type="text" class="estilocampofacturaimporte" id="importe5" onChange="suma();"/></td>
              </tr>
              <tr>
                <td height="70" align="left" valign="top" class="texto_forms1"><input name="cantidad6" type="text" class="estilocampofacturacantidad" id="cantidad6"  onChange="multiplicar(6);"/></td>
                <td align="left" valign="top" class="texto_forms1"><textarea name="concepto6" class="estilotextareafactura" id="concepto6"></textarea></td>
                <td align="left" valign="top" class="texto_forms1"><input name="ml6" type="text" class="estilocampofacturacantidad" id="ml6"  onChange="multiplicar(6);"/></td>
                <td align="left" valign="top" class="texto_forms1"><input name="importe6" type="text" class="estilocampofacturaimporte" id="importe6" onChange="suma();"/></td>
              </tr>
              <tr>
                <td height="20" align="left" valign="top" class="texto_forms1">&nbsp;</td>
                <td align="left" valign="top" class="texto_forms1">&nbsp;</td>
                <td align="left" valign="top" class="texto_forms1">subtotal</td>
                <td align="left" valign="top" class="texto_forms1"><input name="subtotal" type="text" class="estilocampofacturatotal" id="subtotal" /></td>
              </tr>
</table>
qué es lo que hago mal?

Saludos y gracias !
__________________
Impala
  #5 (permalink)  
Antiguo 02/02/2009, 04:46
Avatar de ceSharp  
Fecha de Ingreso: octubre-2008
Ubicación: Madrid
Mensajes: 495
Antigüedad: 16 años
Puntos: 66
Respuesta: Varias multiplicaciones en distintos forms
Una llamada a la función multiplicar iba sin parámetros --> multiplicar() entonces no es capaz de cazar los id.
Aún así te paso tu código un pelín mejorado para que funcione la función sumar. Dentro de la función multiplicar llama a sumar() porque solo la tenías puesto en los textbox con id = importeX. Si no pasa por dicho textbox nunca se ejecutará la función:
(codigo js)
function multiplicar(id){
m1 = document.getElementById('cantidad' + id).value;
m2 = document.getElementById('ml' + id).value;
r = m1*m2;
document.getElementById('importe' + id).value = r;
suma();
}
function suma(){
numero1 = new Number(document.getElementById("importe1").value);
numero2 = new Number(document.getElementById("importe2").value);
numero3 = new Number(document.getElementById("importe3").value);
numero4 = new Number(document.getElementById("importe4").value);
numero5 = new Number(document.getElementById("importe5").value);
numero6 = new Number(document.getElementById("importe6").value);
resultado = numero1 + numero2 + numero3 + numero4 + numero5 + numero6;
if(isNaN(resultado))
resultado = '';
document.getElementById("subtotal").value = resultado;
}
(codigo HTML)
<div>
<table>
<tr>
<td align="left" valign="top">
<table width="650" height="519" border="0" class="tabla">
<tr bgcolor="#CCCCCC">
<td height="20" align="left" valign="top" class="texto_forms1">
<div align="center">
cantidad</div>
</td>
<td align="left" valign="top" class="texto_forms1">
<div align="center">
concepto</div>
</td>
<td align="left" valign="top" class="texto_forms1">
<div align="center">
m2/ml</div>
</td>
<td align="left" valign="top" class="texto_forms1">
<div align="center">
importe</div>
</td>
</tr>
<tr>
<td width="60" height="70" align="left" valign="top" class="texto_forms1">
<input name="cantidad1" type="text" class="estilocampofacturacantidad" id="cantidad1"
onchange="multiplicar(1);" /></td>
<td width="422" align="left" valign="top" class="texto_forms1">
<textarea name="concepto1" class="estilotextareafactura" id="concepto1"></textarea></td>
<td width="60" align="left" valign="top" class="texto_forms1">
<input name="ml1" type="text" class="estilocampofacturacantidad" id="ml1" onchange="multiplicar(1);" /></td>
<td width="90" align="left" valign="top" class="texto_forms1">
<input name="importe1" type="text" class="estilocampofacturaimporte" id="importe1"
onchange="suma();" /></td>
</tr>
<tr>
<td height="70" align="left" valign="top" class="texto_forms1">
<input name="cantidad2" type="text" class="estilocampofacturacantidad" id="cantidad2"
onchange="multiplicar(2);" /></td>
<td align="left" valign="top" class="texto_forms1">
<textarea name="concepto2" class="estilotextareafactura" id="concepto2"></textarea></td>
<td align="left" valign="top" class="texto_forms1">
<input name="ml2" type="text" class="estilocampofacturacantidad" id="ml2" onchange="multiplicar(2);" /></td>
<td align="left" valign="top" class="texto_forms1">
<input name="importe2" type="text" class="estilocampofacturaimporte" id="importe2"
onchange="suma();" /></td>
</tr>
<tr>
<td height="70" align="left" valign="top" class="texto_forms1">
<input name="cantidad3" type="text" class="estilocampofacturacantidad" id="cantidad3"
onchange="multiplicar(3);" /></td>
<td align="left" valign="top" class="texto_forms1">
<textarea name="concepto3" class="estilotextareafactura" id="concepto3"></textarea></td>
<td align="left" valign="top" class="texto_forms1">
<input name="ml3" type="text" class="estilocampofacturacantidad" id="ml3" onchange="multiplicar(3);" /></td>
<td align="left" valign="top" class="texto_forms1">
<input name="importe3" type="text" class="estilocampofacturaimporte" id="importe3"
onchange="suma();" /></td>
</tr>
<tr>
<td height="70" align="left" valign="top" class="texto_forms1">
<input name="cantidad4" type="text" class="estilocampofacturacantidad" id="cantidad4"
onchange="multiplicar(4);" /></td>
<td align="left" valign="top" class="texto_forms1">
<textarea name="concepto4" class="estilotextareafactura" id="concepto4"></textarea></td>
<td align="left" valign="top" class="texto_forms1">
<input name="ml4" type="text" class="estilocampofacturacantidad" id="ml4" onchange="multiplicar(4);" /></td>
<td align="left" valign="top" class="texto_forms1">
<input name="importe4" type="text" class="estilocampofacturaimporte" id="importe4"
onchange="suma();" /></td>
</tr>
<tr>
<td height="70" align="left" valign="top" class="texto_forms1">
<input name="cantidad5" type="text" class="estilocampofacturacantidad" id="cantidad5"
onchange="multiplicar(5);" /></td>
<td align="left" valign="top" class="texto_forms1">
<textarea name="concepto5" class="estilotextareafactura" id="concepto5"></textarea></td>
<td align="left" valign="top" class="texto_forms1">
<input name="ml5" type="text" class="estilocampofacturacantidad" id="ml5" onchange="multiplicar(5);" /></td>
<td align="left" valign="top" class="texto_forms1">
<input name="importe5" type="text" class="estilocampofacturaimporte" id="importe5"
onchange="suma();" /></td>
</tr>
<tr>
<td height="70" align="left" valign="top" class="texto_forms1">
<input name="cantidad6" type="text" class="estilocampofacturacantidad" id="cantidad6"
onchange="multiplicar(6);" /></td>
<td align="left" valign="top" class="texto_forms1">
<textarea name="concepto6" class="estilotextareafactura" id="concepto6"></textarea></td>
<td align="left" valign="top" class="texto_forms1">
<input name="ml6" type="text" class="estilocampofacturacantidad" id="ml6" onchange="multiplicar(6);" /></td>
<td align="left" valign="top" class="texto_forms1">
<input name="importe6" type="text" class="estilocampofacturaimporte" id="importe6"
onchange="suma();" /></td>
</tr>
<tr>
<td height="20" align="left" valign="top" class="texto_forms1">
&nbsp;</td>
<td align="left" valign="top" class="texto_forms1">
&nbsp;</td>
<td align="left" valign="top" class="texto_forms1">
subtotal</td>
<td align="left" valign="top" class="texto_forms1">
<input name="subtotal" type="text" class="estilocampofacturatotal" id="subtotal" /></td>
</tr>
</table>
</div>

salu2
  #6 (permalink)  
Antiguo 02/02/2009, 04:48
Avatar de ceSharp  
Fecha de Ingreso: octubre-2008
Ubicación: Madrid
Mensajes: 495
Antigüedad: 16 años
Puntos: 66
Respuesta: Varias multiplicaciones en distintos forms
...se me olvidaba,
aún así tendrías que revisar tu código porque si metes algún 'no número' en los textbox el resultado de importes = NaN (not a number). O bien mediante algún script que no permita escribir comas o dejando vacío el textbox cuando el resultado no sea un número, etc. Hay multitud de formas de hacerlo; elige la que mas fácil te resulte o la que mejor se adapte a tu código.

salu2
  #7 (permalink)  
Antiguo 02/02/2009, 06:38
 
Fecha de Ingreso: septiembre-2004
Mensajes: 203
Antigüedad: 20 años, 1 mes
Puntos: 0
Respuesta: Varias multiplicaciones en distintos forms
Gracias nuevamente por la respuesta. Solo una cosa te comento. Necesito usar decimales en algunos campos, por eso habia puesto los parseFloat. Vos creés que no los necesito entonces ? Una duda mas, pero es de torpe nomás, por qué en la función multiplicar no ponés 'new Number' como en 'suma' ? Quizás es muy tonta la pregunta, pero asi voy aprendiendo.
Saludos y gracias de nuevo.
__________________
Impala
Última edición por impala; 02/02/2009 a las 06:45
  #8 (permalink)  
Antiguo 02/02/2009, 07:28
Avatar de ceSharp  
Fecha de Ingreso: octubre-2008
Ubicación: Madrid
Mensajes: 495
Antigüedad: 16 años
Puntos: 66
Respuesta: Varias multiplicaciones en distintos forms
yo el parseFloat no lo he utilizado nunca. Declarando las variables como new Number siempre me ha funcionado, incluso con decimales (todo sea que algún día algo me cruja y necesite el parseFloat...). El uso de new Number sirve en este caso, por ejemplo, para que si el valor está vacío devuelve cero, con parseFloat estaba devolviendo NaN (not a number) y no podía hacer la suma en subtotal ya que ciertos valores no eran números.
... y si no lo he puesto en la function multiplicar es porque se me ha ido de la cabeza... pero como funciona pues ni me he dado cuenta. :) . Prueba a ponerlo y verás que el resultado es el mismo.

salu2
  #9 (permalink)  
Antiguo 02/02/2009, 07:36
 
Fecha de Ingreso: septiembre-2004
Mensajes: 203
Antigüedad: 20 años, 1 mes
Puntos: 0
Respuesta: Varias multiplicaciones en distintos forms
si, funciona perfecto! Una última cosa si no te es molestia, sino, suficiente con lo que ya me ayudaste. La pregunta es, hay alguna posibilidad de que el valor dinámico 'subtotal' se multiplique a la vez por 0,16 para que se vaya calculando el IVA al mismo tiempo?
Intenté con este código, pero no funciona:

function calcula_iva(){
v1 = parseFloat(document.getElementById("subtotal").val ue);
calculo = v1*0.16;

document.getElementById("iva").value = calculo;
suma();
}

el html

<input name="subtotal" type="text" class="estilocampofacturatotal" id="subtotal" onChange="calcula_iva();"/>
<input name="iva" type="text" class="estilocampofacturatotal" id="iva" />

Muchisimas gracias ;)
__________________
Impala
  #10 (permalink)  
Antiguo 02/02/2009, 08:18
Avatar de ceSharp  
Fecha de Ingreso: octubre-2008
Ubicación: Madrid
Mensajes: 495
Antigüedad: 16 años
Puntos: 66
Respuesta: Varias multiplicaciones en distintos forms
en tu función calcula_iva() lo haces bien, pero como vuelves a llamar a suma() se 'olvida' que le has asignado una multiplicación por 0.16 porque vuelve a recoger los valores de los textbox sin multiplicar por 0.16
Si quieres que el subtotal sea el iva, en la función suma cambia esta linea:
resultado = numero1 + numero2 + numero3 + numero4 + numero5 + numero6 ;

por esta
resultado = (numero1 + numero2 + numero3 + numero4 + numero5 + numero6) * 0.16;

y directamente aparecerá el cálculo del IVA en el textbox subtotal.

salu2
  #11 (permalink)  
Antiguo 02/02/2009, 08:23
 
Fecha de Ingreso: septiembre-2004
Mensajes: 203
Antigüedad: 20 años, 1 mes
Puntos: 0
Respuesta: Varias multiplicaciones en distintos forms
Gracias nuevamente! El tema es que necesito que esté desglosado, porque tengo un campo 'subtotal', otro 'IVA' y otro 'total'. Por eso era lo de la multiplicación del subtotal * 0.16 al mismo tiempo.
__________________
Impala
  #12 (permalink)  
Antiguo 02/02/2009, 08:27
 
Fecha de Ingreso: septiembre-2004
Mensajes: 203
Antigüedad: 20 años, 1 mes
Puntos: 0
Respuesta: Varias multiplicaciones en distintos forms
jeje, es un poco chapucero supongo, pero así me funciona de 10.

function suma(){
numero1 = new Number(document.getElementById("importe1").value);
numero2 = new Number(document.getElementById("importe2").value);
numero3 = new Number(document.getElementById("importe3").value);
numero4 = new Number(document.getElementById("importe4").value);
numero5 = new Number(document.getElementById("importe5").value);
numero6 = new Number(document.getElementById("importe6").value);
resultado = numero1 + numero2 + numero3 + numero4 + numero5 + numero6;
resultadoiva = (numero1 + numero2 + numero3 + numero4 + numero5 + numero6)*0.16;
if(isNaN(resultado))
resultado = '';
if(isNaN(resultadoiva))
resultadoiva = '';
document.getElementById("subtotal").value = resultado;
document.getElementById("iva").value = resultadoiva;
}

Qué te parece ?

Saludos y miles de gracias!
__________________
Impala
  #13 (permalink)  
Antiguo 02/02/2009, 08:50
Avatar de ceSharp  
Fecha de Ingreso: octubre-2008
Ubicación: Madrid
Mensajes: 495
Antigüedad: 16 años
Puntos: 66
Respuesta: Varias multiplicaciones en distintos forms
así está genial. Si quieres el importe y el iva no te queda mas remedio que hacerlo dos veces. como en todo, hay multiples formas de hacer las cosas, tanto en js, php, .net, java... y lo que has hecho tú es una de ellas. Al final lo que cuenta es lo cómodo que trabajes o lo facil o dificil que te resulte hacer las cosas.

Salu2.
  #14 (permalink)  
Antiguo 02/02/2009, 11:16
 
Fecha de Ingreso: septiembre-2004
Mensajes: 203
Antigüedad: 20 años, 1 mes
Puntos: 0
Respuesta: Varias multiplicaciones en distintos forms
Muchas gracias, amigo. Me fuiste de mucha ayuda. Hasta otra.
__________________
Impala
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 18:32.