Formulario incompleto

juancarsantana · #1 (**permalink**) 20/03/2014, 20:07

Buenas a tod@s.

Tengo "realizado" un formulario ( con su css correspondiente ) en el que quiero que seleccionando una o varias opciones, las vaya sumando y le sume el impuesto correspondiente. Pero ésto último no me sale.

Creo que me falta algo.

El código sería éste:

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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>..: calcular :..</title>
 
          <script type="text/javascript">
 
function calcular(){
var valor_1= document.formulario.s_aleta_delantera_izquierda[document.formulario.s_aleta_delantera_izquierda.selectedIndex].value;
var valor_2= document.formulario.s_puerta_delantera_izquierda[document.formulario.s_puerta_delantera_izquierda.selectedIndex].value;
var valor_3= document.formulario.s_puerta_trasera_izquierda[document.formulario.s_puerta_trasera_izquierda.selectedIndex].value;
var valor_4= document.formulario.s_aleta_trasera_izquierda[document.formulario.s_aleta_trasera_izquierda.selectedIndex].value;
var valor_5= document.formulario.s_paragolpes_delantero[document.formulario.s_paragolpes_delantero.selectedIndex].value;
var valor_6= document.formulario.s_paragolpes_trasero[document.formulario.s_paragolpes_trasero.selectedIndex].value;
var valor_7= document.formulario.s_capo[document.formulario.s_capo.selectedIndex].value;
var valor_8= document.formulario.s_maletero[document.formulario.s_maletero.selectedIndex].value;
var valor_9= document.formulario.s_optica[document.formulario.s_optica.selectedIndex].value;
var valor_10= document.formulario.s_techo[document.formulario.s_techo.selectedIndex].value;
var valor_11= document.formulario.s_espejo[document.formulario.s_espejo.selectedIndex].value;
var valor_12= document.formulario.s_aleta_delantera_derecha[document.formulario.s_aleta_delantera_derecha.selectedIndex].value;
var valor_13= document.formulario.s_puerta_delantera_derecha[document.formulario.s_puerta_delantera_derecha.selectedIndex].value;
var valor_14= document.formulario.s_puerta_trasera_derecha[document.formulario.s_puerta_trasera_derecha.selectedIndex].value;
var valor_15= document.formulario.s_aleta_trasera_derecha[document.formulario.s_aleta_trasera_derecha.selectedIndex].value;
 
var detalle = new Array();
detalle[1] = valor_1.split(‘|’);
detalle[2] = valor_2.split(‘|’);
detalle[3] = valor_3.split(‘|’);
detalle[4] = valor_4.split(‘|’);
detalle[5] = valor_5.split(‘|’);
detalle[6] = valor_6.split(‘|’);
detalle[7] = valor_7.split(‘|’);
detalle[8] = valor_8.split(‘|’);
detalle[9] = valor_9.split(‘|’);
detalle[10] = valor_10.split(‘|’);
detalle[11] = valor_11.split(‘|’);
detalle[12] = valor_12.split(‘|’);
detalle[13] = valor_13.split(‘|’);
detalle[14] = valor_14.split(‘|’);
detalle[15] = valor_15.split(‘|’);
 
var descripcion_txt = “;
var estado_txt = “;
var precio_txt = “;
var suma_precio = null;
 
for (i=1;i<=15;i++) {
    if (detalle[i][0] !=0) {
        descripcion_txt = descripcion_txt+detalle[i][0]+’<br />’;
        estado_txt = estado_txt+detalle[i][1]+’<br />’;
        precio_txt = precio_txt+detalle[i][2]+’.00 &euro;<br />’;
        suma_precio = suma_precio + parseInt(detalle[i][2]);
      }
   }
 
var suma_igic = suma_precio * 0.7;
var total = suma_precio + suma_igic;
 
if (suma_precio > 0) {
    document.getElementByld(’descripcion’).innerHTML = descrpcion_txt;
    document.getElementByld(’estado’).innerHTML = estado_txt;
    document.getElementByld(’precio’).innerHTML = precio_txt;
    document.getElementByld(’total_precio’).innerHTML = suma_precio.toFixed(2)+’ &euro;<br />’+suma_igic.toFixed(2)+’ &euro;<br /><b>’+total.toFixed(2)+’</b> &euro;’;
   } else {
    document.getElementByld(’descripcion’).innerHTML = ’&nbsp;’;
    document.getElementByld(’estado’).innerHTML = ’&nbsp;’;
    document.getElementByld(’precio’).innerHTML = ’&nbsp;’;
    document.getElementByld(’total_precio’).innerHTML = ’’;
   }
 
}
 
</script>
    </head>
    <body>
<div class="centro_presupuesto">
 
<img alt="" src="http://talleresvehincar.com/wp-content/uploads/2014/03/Partes-del-Coche.png" />
 
<form action="#" name="formulario"><span class="t_aleta_delantera_izquierda">Aleta delantera</span>
 
<span style="position: absolute; top: 829px; left: 25px;"><select name="s_aleta_delantera_izquerda" onchange="calcular();"><option value="0">Seleccionar</option><option value="Aleta delantera izquierda|Leve|75">Leve: 75 €</option><option value="Aleta delantera izquierda|Medio|90">Medio: 90 €</option><option value="Aleta delantera izquierda|Fuerte|120">Fuerte: 120 €</option></select></span>
&nbsp;
 
<span class="t_puerta_delantera_izquierda">Puerta delantera</span>
 
<span style="position: absolute; top: 531px; left: 153px;"><select name="s_puerta_delantera_izquerda" onchange="calcular();"><option value="0">Seleccionar</option><option value="Puerta delantera izquierda|Leve|90">Leve: 90 €</option><option value="Puerta delantera izquierda|Medio|110">Medio: 110 €</option><option value="Puerta delantera izquierda|Fuerte|120">Fuerte: 120 €</option></select></span>
&nbsp;
 
&nbsp;
 
&nbsp;
 
<span class="t_puerta_trasera_izquierda">Puerta trasera</span>
 
......................
 
<span class="t_techo">Techo</span>
 
<span style="position: absolute; top: 1196px; left: 275px;"><select name="s_techo" onchange="calcular();"><option value="0">Seleccionar</option><option value="Techo|Leve|120">Leve: 120 €</option><option value="Techo|Medio|150">Medio: 150 €</option><option value="Techo|Fuerte|180">Fuerte: 180 €</option></select></span>&nbsp;
 
&nbsp;
 
&nbsp;
 
<span class="t_espejo">Espejos</span>
 
<span style="position: absolute; top: 788px; left: 190px;"><select name="s_espejo" onchange="calcular();"><option value="0">Seleccionar</option><option value="1 Espejo|Leve|25">1 Leve: 25 €</option><option value="2 Espejos|Leve|50">2 Leve: 50 €</option><option value="1 Espejo|Medio|40">1 Medio: 40 €</option><option value="2 Espejos|Medio|80">2 Medio: 80 €</option></select></span>
&nbsp;
 
</form></div>
<!-- fin presupuesto -->
<h2 style="text-align: center;"><strong><span style="color: #ff0000;">Calcule usted mismo su presupuesto de pintura</span></strong></h2>
<p class="mensaje" style="text-align: center;"><span style="color: #000000;"><strong>Seleccione las partes del vehículo que desea incluir y le proporcionaremos un presupuesto.</strong></span></p>
<div class="superior_presupuesto">
<div class="info">
<h4>Tipo de daño del vehículo</h4>
<ul>
<li>
<span class="rojo">Daño leve: </span>
Rayas pequeñas.
</li>
<li>
<span class="rojo">Daño medio:</span>
Golpes pequeños.
</li>
<li>
<span class="rojo">Daño fuerte:</span>
Golpes grandes.
</li>
</ul>
</div>
<div class="desglose_presupuesto">
<table class="desglose_presupuesto" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="datos" colspan="3">
<form action="#" name="datos">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="pequeno"></td>
<td class="obligatorios_span">
<h5>* campos obligatorios</h5>
</td>
</tr>
<tr>
<td class="etiqueta">Nombre y apellidos:</td>
<td>
<input type="text" name="nombre">
</td>
</tr>
<tr>
<td class="etiqueta">Marca:</td>
<td>
<input type="text" name="marca">
</td>
</tr>
<tr>
<td class="etiqueta">Modelo:</td>
<td>
<input type="text" name="modelo">
</td>
</tr>
<tr>
<td class="etiqueta">Teléfono:</td>
<td>
<input type="text" name="telefono">
</td>
</tr>
<tr>
<td class="etiqueta"> </td>
<td></td>
</tr>
</tbody>
</table>
</form>
</td>
</tr>
<tr>
<td class="titulo tit_desc">Descripción</td>
<td class="titulo">Daño</td>
<td class="titulo tit_precio">Precio</td>
</tr>
<tr>
<td id="descripcion" class="descripcion"></td>
<td id="estado" class="estado"> </td>
<td id="precio" class="precio"></td>
</tr>
<tr>
<td class="igic" colspan="2">
Subtotal
<br>
IGIC 7%
<br>
TOTAL
<br>
<h5>Presupuesto sujeto a aprobación del taller</h5>
</td>
<td id="total_precio" class="total"></td>
</tr>
</tbody>
</table>
<div id="imprimir" class="imprimir">
<img onclick="imprimir();"">
<span onclick="imprimir();">Imprimir el presupuesto</span>
</div>
</div>
<div class="clearer"></div>
</div>
 
    </body>
    </html>

Agradezco vuestra ayuda