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<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Pagina nueva 1</title>
</head>
<script language=javascript>
total1=0;
function Suma(formulario){
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){
total1+=parseInt(grupo[j].value);
}
}
}else if (formulario.elements[i].type=="checkbox"){
if(formulario.elements[i].checked){
total1+=parseInt(formulario.elements[i].value);
}
}
}
document.f1.total.value = total1;
}
</script>
<script>
function calcularMultiplicacion(ancho1, alto1, 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;
}
</script>
<body > <form method="post" name="f1">
<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>
<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>
</tr>
<tr>
<td colspan="3">
<p>Selecione su tipo de vidrio</p>
<p> Vidrio incoloro 5 mm <input name="grupo_radio" id="radio_1" onclick="Suma(this.form)" type="radio" value="100" /></p>
<p> Vidrio incoloro 6 mm<input name="grupo_radio" id="radio_2" onclick="Suma(this.form)" type="radio" value="50" /></p>
<p> Vidrio incoloro 8 mm <input name="grupo_radio" id="radio_3" onclick="Suma(this.form)" type="radio" value="100" /></p>
<p> 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> Batiente I<input name="grupo_radio2" id="radio_3" onclick="Suma(this.form)" type="radio" value="300" /></p>
<p> Batiente II<input name="grupo_radio2" id="radio_4" onclick="Suma(this.form)" type="radio" value="25" /></p>
<p> Corredera I<input name="grupo_radio2" id="radio_5" onclick="Suma(this.form)" type="radio" value="300" /></p>
<p> Corredera II<input name="grupo_radio2" id="radio_6" onclick="Suma(this.form)" type="radio" value="25" /></p>
<p> Corredera III<input name="grupo_radio2" id="radio_7" onclick="Suma(this.form)" type="radio" value="300" /></p>
<p> Corredera IV<input name="grupo_radio2" id="radio_8" onclick="Suma(this.form)" type="radio" value="25" /></p>
<p> 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> 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> Transporte<input name="grupo_radio4" id="radio_11" onclick="Suma(this.form)" type="radio" value="300" /></p>
</td>
</tr>
<tr>
<th colspan="6" >
<p>
</p>
<p>
Total<input name="total" type="text" value="0" /></p>
</th></tr>
</form>
</tr>
</body>
</html>