Foros del Web » Programando para Internet » Javascript »

Multiplicar por un checkbox

Estas en el tema de Multiplicar por un checkbox en el foro de Javascript en Foros del Web. este es mi codigo no puedo multiplicar el area por el valor del vidrio y que continue sumando gracias <script> function Suma(formulario){ total=0; nombre=""; for(i=0;i<formulario.elements.length;i++){ ...
  #1 (permalink)  
Antiguo 11/04/2015, 13:53
 
Fecha de Ingreso: abril-2015
Mensajes: 3
Antigüedad: 9 años
Puntos: 0
Multiplicar por un checkbox

este es mi codigo no puedo multiplicar el area por el valor del vidrio y que continue sumando
gracias

<script>
function Suma(formulario){
total=0;
nombre="";
for(i=0;i<formulario.elements.length;i++){
if(formulario.elements[i].type=="radio" && nombre!=formulario.elements[i].name){
nombre=formulario.elements[i].name;
grupo=document.getElementsByName(nombre);
for(j=0;j<grupo.length;j++){
if(grupo[j].checked){
total+=parseInt(grupo[j].value);
}
}
}else if (formulario.elements[i].type=="checkbox"){
if(formulario.elements[i].checked){
total+=parseInt(formulario.elements[i].value);
}
}
}
document.form1.total.value = total;
}
</script>

<script>
function calcularMultiplicacion(ancho, alto, area,)
{
var casilla1=document.getElementById( ancho );
var ancho = casilla1.value;
var casilla2=document.getElementById( alto );
var alto = casilla2.value;
var resultado=document.getElementById( area );
resultado.innerHTML = "Area: " +(parseInt(ancho)*parseInt(alto));
resultado.style.color = "blue";
}
</script>

<table BORDER=7 align="center">
<tr>
<th colspan="6"> <div align="center">FORMULARIO DE PEDIDO </div></th>
</tr>
<tr>
<th>contacto</th>
<th> <input type="text" name="contacto" id="contacto" /></th>
<th>tel fijo</th>
<th><input type="text" name="tel fijo" id="tel fijo" /></th>
<th>tel movil</th>
<th><input type="text" name="tel movil" id="tel movil" /></th>
</tr>
<tr>
<td>direccion</td>
<td><input type="text" name="direccion" id="direccion" /></td>
<td>ciudad</td>
<td> <input type="text" name="ciudad" id="ciudad" /></td>
<td>barrio</td>
<td> <input type="text" name="barrio" id="barrio" /></td>
</tr>
<tr>
<td>email</td>
<td><input type="text" name="email" id="email" /></td>
<td>forma de pago</td>
<td> <input type="text" name="forma de pago" id="forma de pago" /></td>
</tr>

<tr>
<form>
<TD>ancho</TD> <td><input type="text" name="ancho" id="ancho" /></td>
<TD>alto</TD><td><input type="text" name="alto" id="alto" /></td>
<td><p id="area">Area: </p></td>
<td><button type="button"
onclick="calcularMultiplicacion('ancho', 'alto', 'area')">
Calcular area</button></td>
</form>
</tr>

<tr>
<form method="post" name="form1">

<td colspan="3">
<p>Selecione su tipo de vidrio</p>

<p>&nbsp;&nbsp; &nbsp; Vidrio incoloro 5 mm <input name="grupo_radio" id="radio_1" onclick="Suma(this.form)" type="radio" value="100" /></p>

<p>&nbsp;&nbsp; &nbsp; Vidrio incoloro 6 mm<input name="grupo_radio" id="radio_2" onclick="Suma(this.form)" type="radio" value="50" /></p>

<p>&nbsp;&nbsp; &nbsp; Vidrio incoloro 8 mm <input name="grupo_radio" id="radio_3" onclick="Suma(this.form)" type="radio" value="100" /></p>

<p>&nbsp;&nbsp; &nbsp; Vidrio incoloro 10 mm<input name="grupo_radio" id="radio_4" onclick="Suma(this.form)" type="radio" value="50" /></p>
</td>

<td colspan="3">
<p>Seleccione los accesorios</p>

<p>&nbsp;&nbsp; &nbsp; Batiente I<input name="grupo_radio2" id="radio_3" onclick="Suma(this.form)" type="radio" value="300" /></p>

<p>&nbsp;&nbsp; &nbsp; Batiente II<input name="grupo_radio2" id="radio_4" onclick="Suma(this.form)" type="radio" value="25" /></p>

<p>&nbsp;&nbsp; &nbsp; Corredera I<input name="grupo_radio2" id="radio_5" onclick="Suma(this.form)" type="radio" value="300" /></p>

<p>&nbsp;&nbsp; &nbsp; Corredera II<input name="grupo_radio2" id="radio_6" onclick="Suma(this.form)" type="radio" value="25" /></p>

<p>&nbsp;&nbsp; &nbsp; Corredera III<input name="grupo_radio2" id="radio_7" onclick="Suma(this.form)" type="radio" value="300" /></p>

<p>&nbsp;&nbsp; &nbsp; Corredera IV<input name="grupo_radio2" id="radio_8" onclick="Suma(this.form)" type="radio" value="25" /></p>

<p>&nbsp;&nbsp; &nbsp; Corredera V<input name="grupo_radio2" id="radio_9" onclick="Suma(this.form)" type="radio" value="25" /></p>
</td>
<tr>
<td colspan="3">
<p>Require Instalacion</p>

<p>&nbsp;&nbsp; &nbsp; Instalacion<input name="grupo_radio3" id="radio_10" onclick="Suma(this.form)" type="radio" value="300" /></p>
</td>
<td colspan="3">
<p>Require Transporte</p>

<p>&nbsp;&nbsp; &nbsp; Transporte<input name="grupo_radio4" id="radio_11" onclick="Suma(this.form)" type="radio" value="300" /></p>
</td>
</tr>
<tr>
<th colspan="6" >
<p>
&nbsp;</p>
<p>
Total<input name="total" type="text" value="0" /></p>
</th></tr>
</form>
</tr>
  #2 (permalink)  
Antiguo 11/04/2015, 14:34
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 10 años, 7 meses
Puntos: 578
Respuesta: Multiplicar por un checkbox

Hubiera sido más útil explicar el problema a poner todo el código

Realmente sin indentación en el código, ni formato, ni explicaciones ni nada, no apetece ayudar mucho
  #3 (permalink)  
Antiguo 11/04/2015, 15:51
 
Fecha de Ingreso: abril-2015
Mensajes: 3
Antigüedad: 9 años
Puntos: 0
Respuesta: Multiplicar por un checkbox

Cita:
Iniciado por PHPeros Ver Mensaje
Hubiera sido más útil explicar el problema a poner todo el código

Realmente sin indentación en el código, ni formato, ni explicaciones ni nada, no apetece ayudar mucho

buena tarde
es mi primera vez que ingreso

como debo formular la pregunta
  #4 (permalink)  
Antiguo 11/04/2015, 16:01
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: Multiplicar por un checkbox

Hola:

En el editor de los mensajes hay un control select con el texto Highlight... solo debes seleccionar el texto y aplicar alguna de las opciones...

Sobre la pregunta (recuerda formatear el código en otras ocasiones), donde pones como parámetro this.form, si solo pones this, en la función será muy simple obtener el value...

function sumar(elemento) {
sumando = elemento.value;
...
}

De esa forma el valor es elemento.value; y si te interesa el resto del formulario, desde la función lo obtienes con elemento.form

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #5 (permalink)  
Antiguo 12/04/2015, 12:10
 
Fecha de Ingreso: abril-2015
Mensajes: 24
Antigüedad: 9 años
Puntos: 1
Respuesta: Multiplicar por un checkbox

Hola.

Me he tomado la molestia de cargar el código en FrontPage, en su versión 2003. En mi opinión el mejor editor HTML para trabajar con JavaScript.

El problema del área viene de algunos errores de la función
calcularMultiplicacion(ancho, alto, area)

Para empezar la coma que había delante del argumento "area" te la estaba jugando y generaba un error.

Para seguir, los nombres de las variables no pueden ser los mismos que los nombre de los campos. Me refiero a alto y ancho.

Por otra parte, si él formulario está bajo la etiqueta <form> debes de argumentarlo con el nombre del formulario. Pongamos por caso que le llamas name=f1. De otra forma JavaScript no los podrá identificar.

Entonces las líneas de código deberían ser

ancho1=f1.ancho.value;
alto1=f1.alto. value;

Observa que los nombres de las variables tienen un "1" al final ya que no pueden tener el mismo que el de los campos.

Obviamente en la línea del resultado.innerHTML deberás cambiar el nombre de las variables, de ancho y alto, a ancho1 y alto1.

La función quedaría resuelta de esta forma


function calcularMultiplicacion(ancho, alto, area)
{
casilla1=document.getElementById( ancho1 );
ancho1 = eval(f1.ancho.value);
casilla2=document.getElementById( alto1 );
alto1 = eval(f1.alto.value);
resultado=document.getElementById( area );
resultado.innerHTML = "Area: " +(parseInt(ancho1)*parseInt(alto1));
resultado.style.color = "blue";

total1=total1*(parseInt(ancho1)*parseInt(alto1))
f1.total.value=total1;
}

Las dos últimas líneas multiplican el área y el resultado aritmético del resto de parámetros (tipo vidrio, transporte, etc....)

En mi opinión las líneas casilla1 y casilla2 son innecesarias.

He fundido los dos formularios en uno solo bajo el nombre f1.

La variable total coincide con el valor de campo total, luego habría que renombrar la variable o el campo. En este caso renombré la variable al nombre total1.

Con las modificaciones realizadas ya obtienes el valor del área y se suma al del tipo de vidrio, junto a la instalación y transporte.

Dejo colgado él formulario en la siguiente dirección:

http://casinosoft.esy.es/casino-casinosoft/calculo.htm

Observarás que la aplicación está operativa.

Por último, la variable total1 (antes total) la he dejado fuera de la función para que su valor de inicio no influya en el resto de operaciones. Esto es, tenga un carácter meramente declarativa.

Código Javascript:
Ver original
  1. <html>
  2.  
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  5. <title>Pagina nueva 1</title>
  6. </head>
  7.  
  8.  
  9. <script language=javascript>
  10.  total1=0;
  11.  function Suma(formulario){
  12.  
  13.  nombre="";
  14.  for(i=0;i<formulario.elements.length;i++){
  15.  if(formulario.elements[i].type=="radio" && nombre!=formulario.elements[i].name){
  16.  nombre=formulario.elements[i].name;
  17.  grupo=document.getElementsByName(nombre);
  18.  for(j=0;j<grupo.length;j++){
  19.  if(grupo[j].checked){
  20.  total1+=parseInt(grupo[j].value);
  21.  }
  22.  }
  23.  }else if (formulario.elements[i].type=="checkbox"){
  24.  if(formulario.elements[i].checked){
  25.  total1+=parseInt(formulario.elements[i].value);
  26.  }
  27.  }
  28.  }
  29.  document.f1.total.value = total1;
  30.  }
  31.  </script>
  32.  
  33.  <script>
  34.  function calcularMultiplicacion(ancho1, alto1, area)
  35.  {
  36. casilla1=document.getElementById( ancho1 );
  37.  ancho1 = eval(f1.ancho.value);
  38.  casilla2=document.getElementById( alto1 );
  39.  alto1 = eval(f1.alto.value);
  40.  resultado=document.getElementById( area );
  41.  resultado.innerHTML = "Area: " +(parseInt(ancho1)*parseInt(alto1));
  42.  resultado.style.color = "blue";
  43.  
  44.  total1=total1*(parseInt(ancho1)*parseInt(alto1))
  45.  f1.total.value=total1;
  46.  
  47.  }
  48.  </script>
  49. <body > <form method="post" name="f1">
  50.  <table BORDER=7 align="center">
  51.  <tr>
  52.  <th colspan="6"> <div align="center">FORMULARIO DE PEDIDO </div></th>
  53.  </tr>
  54.  <tr>
  55.  <th>contacto</th>
  56.  <th> <input type="text" name="contacto" id="contacto" /></th>
  57.  <th>tel fijo</th>
  58.  <th><input type="text" name="tel fijo" id="tel fijo" /></th>
  59.  <th>tel movil</th>
  60.  <th><input type="text" name="tel movil" id="tel movil" /></th>
  61.  </tr>
  62.  <tr>
  63.  <td>direccion</td>
  64.  <td><input type="text" name="direccion" id="direccion" /></td>
  65.  <td>ciudad</td>
  66.  <td> <input type="text" name="ciudad" id="ciudad" /></td>
  67.  <td>barrio</td>
  68.  <td> <input type="text" name="barrio" id="barrio" /></td>
  69.  </tr>
  70.  <tr>
  71.  <td>email</td>
  72.  <td><input type="text" name="email" id="email" /></td>
  73.  <td>forma de pago</td>
  74.  <td> <input type="text" name="forma de pago" id="forma de pago" /></td>
  75.  </tr>
  76.  
  77.  <tr>
  78.  
  79.  <TD>ancho</TD> <td><input type="text" name="ancho" id="ancho" /></td>
  80.  <TD>alto</TD><td><input type="text" name="alto" id="alto" /></td>
  81.  <td><p id="area">Area: </p></td>
  82.  <td><button type="button"
  83.  onclick="calcularMultiplicacion('ancho', 'alto', 'area')">
  84.  Calcular area</button></td>
  85.  
  86.  </tr>
  87.  
  88.  <tr>
  89.  
  90.  
  91.  <td colspan="3">
  92.  <p>Selecione su tipo de vidrio</p>
  93.  
  94.  <p>&nbsp;&nbsp; &nbsp; Vidrio incoloro 5 mm <input name="grupo_radio" id="radio_1" onclick="Suma(this.form)" type="radio" value="100" /></p>
  95.  
  96.  <p>&nbsp;&nbsp; &nbsp; Vidrio incoloro 6 mm<input name="grupo_radio" id="radio_2" onclick="Suma(this.form)" type="radio" value="50" /></p>
  97.  
  98.  <p>&nbsp;&nbsp; &nbsp; Vidrio incoloro 8 mm <input name="grupo_radio" id="radio_3" onclick="Suma(this.form)" type="radio" value="100" /></p>
  99.  
  100.  <p>&nbsp;&nbsp; &nbsp; Vidrio incoloro 10 mm<input name="grupo_radio" id="radio_4" onclick="Suma(this.form)" type="radio" value="50" /></p>
  101.  </td>
  102.  
  103.  <td colspan="3">
  104.  <p>Seleccione los accesorios</p>
  105.  
  106.  <p>&nbsp;&nbsp; &nbsp; Batiente I<input name="grupo_radio2" id="radio_3" onclick="Suma(this.form)" type="radio" value="300" /></p>
  107.  
  108.  <p>&nbsp;&nbsp; &nbsp; Batiente II<input name="grupo_radio2" id="radio_4" onclick="Suma(this.form)" type="radio" value="25" /></p>
  109.  
  110.  <p>&nbsp;&nbsp; &nbsp; Corredera I<input name="grupo_radio2" id="radio_5" onclick="Suma(this.form)" type="radio" value="300" /></p>
  111.  
  112.  <p>&nbsp;&nbsp; &nbsp; Corredera II<input name="grupo_radio2" id="radio_6" onclick="Suma(this.form)" type="radio" value="25" /></p>
  113.  
  114.  <p>&nbsp;&nbsp; &nbsp; Corredera III<input name="grupo_radio2" id="radio_7" onclick="Suma(this.form)" type="radio" value="300" /></p>
  115.  
  116.  <p>&nbsp;&nbsp; &nbsp; Corredera IV<input name="grupo_radio2" id="radio_8" onclick="Suma(this.form)" type="radio" value="25" /></p>
  117.  
  118.  <p>&nbsp;&nbsp; &nbsp; Corredera V<input name="grupo_radio2" id="radio_9" onclick="Suma(this.form)" type="radio" value="25" /></p>
  119.  </td>
  120.  <tr>
  121.  <td colspan="3">
  122.  <p>Require Instalacion</p>
  123.  
  124.  <p>&nbsp;&nbsp; &nbsp; Instalacion<input name="grupo_radio3" id="radio_10" onclick="Suma(this.form)" type="radio" value="300" /></p>
  125.  </td>
  126.  <td colspan="3">
  127.  <p>Require Transporte</p>
  128.  
  129.  <p>&nbsp;&nbsp; &nbsp; Transporte<input name="grupo_radio4" id="radio_11" onclick="Suma(this.form)" type="radio" value="300" /></p>
  130.  </td>
  131.  </tr>
  132.  <tr>
  133.  <th colspan="6" >
  134.  <p>
  135.  &nbsp;</p>
  136.  <p>
  137.  Total<input name="total" type="text" value="0" /></p>
  138.  </th></tr>
  139.  </form>
  140.  </tr>
  141. </body>
  142.  
  143. </html>

Última edición por luisceb; 12/04/2015 a las 12:21
  #6 (permalink)  
Antiguo 12/04/2015, 12:48
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 10 años, 7 meses
Puntos: 578
Respuesta: Multiplicar por un checkbox

Cita:
Iniciado por luisceb
Me he tomado la molestia de cargar el código en FrontPage, en su versión 2003. En mi opinión el mejor editor HTML para trabajar con JavaScript.
Nada más ver tu código entendí por qué te gusta tanto usar susodicho programa de Mordor

Hay muchísimas alternativas a hacerlo que no requieran hacer uso de eval(). Se puede mejorar mucho más todavía, pero se agradece la participación
  #7 (permalink)  
Antiguo 17/04/2015, 13:55
 
Fecha de Ingreso: abril-2015
Mensajes: 3
Antigüedad: 9 años
Puntos: 0
Respuesta: Multiplicar por un checkbox

Buena tarde

agradecer a todos por los comentarios y sugerencias.

no tengo experiencia en programación y lo que he tratado es acomodar los codigos que veo a mis necesidades.

en esta oportunidad, mi pretencion es que los campos ancho y alto reciban cifras con decimal se multipliquen entre si y este resultado se multiplique por el precio unitario del vidrio, este valor quede acumulado y se sume a los accesorios transporte e instalacion.

nuevamente gracias por la colaboracion brindada

Etiquetas: checkbox, formulario, html, multiplicar
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




La zona horaria es GMT -6. Ahora son las 04:59.