Formulario html-javascript

Hola,
Iré al grano. Tengo un formulario compuesto por 20 lineas, cada una con 5 radios y 2 cajas de texto. Al final del mismo, 3 cajas mas para realizar operciones. La idea es:
-En la caja de texto de la izda.el usuario deberá escribir un numero (hecho)
-Al seleccionar "A","B","C" o "D", aparecerá el valor en la caja dcha. (hecho)
-Si además se selecciona "Silueta", se deberá sumar 5 en la casilla dcha. (no lo he logrado)
-En "total compra" deberán sumarse todos los valores de la fila de cajas a la dcha.(no lo he logrado)
-En "IVA 18%" deberá aparecer el 18% del valor de "total compra"(no lo he logrado)
-En "Total a pagar", se deberán sumar "total compra" y "IVA 18%"
A ver si me puedes echar una mano...te pasó el código con 4 lineas (en realidad tiene 20):
<form name="formulario" method="POST" action="">
<table width="103%" height="1235"  border="0" cellspacing="0">
<tr>
<td height="21" colspan="19">
<table width="100%"  border="0" cellspacing="0">
<tr>
<td height="65" colspan="17">
<div align="center" class="Estilo16">
<p>COMPRA DE FOTOGRAFÍAS </p>
</div>
</td>
</tr>
<tr>
<td colspan="2"> </td>
<td width="16%" bgcolor="#006600">
<div align="center" class="Estilo13"><span class="Estilo29">Nº de fotografía</span></div>
</td>
<td colspan="11" bgcolor="#006600">
<div align="center" class="Estilo13"><span class="Estilo29">Seleccione la categoría y si desea la silueta</span></div>
<div align="center" class="Estilo13"></div>
</td>
<td width="15%" bgcolor="#006600">
<div align="center"><span class="Estilo13"><span class="Estilo29">Precio</span></span></div>
</td>
<td width="1%" bgcolor="#000000"> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td bordercolor="#006600" bgcolor="#003300">
<div align="center">
                    <input name="textfield5" type="text" size="5">
                </div>
</td>
<td width="3%" bordercolor="#006600" bgcolor="#003300">
<div align="center">
                 <input name="radiobutton1" type="radio" onclick="doIt1(4);this.form['t1'].disabled=true;" value="4">
                </div>
</td>
<td width="7%" bordercolor="#006600" bgcolor="#003300">
<div align="center" class="Estilo13 Estilo21">
<div align="left"><strong>A</strong></div>
</div>
</td>
<td width="3%" bordercolor="#006600" bgcolor="#003300"><span class="Estilo25">
                  <input name="radiobutton1" type="radio" onclick="doIt1(6);this.form['t1'].disabled=true;" value="6">
                </span></td>
<td width="8%" bordercolor="#006600" bgcolor="#003300"><span class="Estilo10"><strong>B</strong></span></td>
<td width="3%" bordercolor="#006600" bgcolor="#003300">
<div align="center">
                    <input name="radiobutton1" type="radio" onclick="doIt1(8);this.form['t1'].disabled=true;" value="8">
                </div>
</td>
<td colspan="2" bordercolor="#006600" bgcolor="#003300">
<div align="center" class="Estilo10">
<div align="left"><strong>C</strong></div>
</div>
<div align="center">
                  </div>
</td>
<td width="3%" bordercolor="#006600" bgcolor="#003300">
<div align="center" class="Estilo10">
<div align="left">
                      <input name="radiobutton1" type="radio" onclick="doIt1(10);this.form['t1'].disabled=true;" value="10">
                    </div>
</div>
</td>
<td width="9%" bordercolor="#006600" bgcolor="#003300">
<div align="left" class="Estilo29 Estilo13"><strong>D</strong>
                </div>
</td>
<td width="3%" bordercolor="#006600" bgcolor="#003300"><input name="radiobuttonsilueta" type="radio" onClick="doIt1(4)" value="4"></td>
<td width="16%" bordercolor="#006600" bgcolor="#003300"><span class="Estilo23">Silueta</span></td>
<td bordercolor="#006600" bgcolor="#003300">
<div align="center">
                    <input name=t1 type=text style=" text-align: right" value="0" size="8" >
                  <span class="Estilo34">€</span>                </div>
</td>
<td rowspan="7"> </td>
<td...

1 respuesta

1
Respuesta de
Hola, que tal:
A ver que te parece este código. He cambiado el tuyo para que la generación de líneas se haga por javascript, para que sea mas versátil. Cambia la variable TOTAL_LINEAS y listo.

<html>
<head>
<script> 
var TOTAL_LINEAS = 10;
var IVA = 18;
function doIt(_radio,_numLinea){
var cajaT = document.formulario["t" + _numLinea];
cajaT.value = _radio.value;
cajaT.disabled=true;
var checkboxSilueta = document.getElementById("checkboxSilueta" + _numLinea);
checkboxSilueta.disabled = false;
if (checkboxSilueta.checked){
cajaT.value = parseInt(cajaT.value) + 5;
}
recalcula();
}
function doItSilueta(_checkbox,_numLinea){
var cajaT = document.formulario["t" + _numLinea];
if (_checkbox.checked){
cajaT.value = parseInt(cajaT.value) + 5;
}
else{
cajaT.value = parseInt(cajaT.value) - 5;
}
recalcula();
}
function recalcula(){
var valorAcumulado = 0;
var valorIVA;
var cajaT;
var numLinea;
for (ix=0; ix<TOTAL_LINEAS; ix++){
numLinea = ix + 1;
cajaT = document.formulario["t" + numLinea];
valorAcumulado += parseInt(cajaT.value);
}
document.getElementById("totalcompra").value = valorAcumulado;
valorIVA = valorAcumulado * 18/100;
document.getElementById("iva").value = valorIVA;
document.getElementById("totalapagar").value = valorAcumulado + valorIVA;
}
function generaLineas(){
var html = "";
for (ix=0; ix<TOTAL_LINEAS; ix++){
html += htmlLinea(ix+1);
}
document.write(html);
}
function htmlLinea(_numLinea){
var html = '';
html += '<tr><td colspan="2"> </td><td bordercolor="#006600" bgcolor="#003300"><div align="center">';
html += '<input name="numeroFoto' + _numLinea + '" id="numeroFoto' + _numLinea + '" type="text" size="5"></div></td><td width="3%" bordercolor="#006600" bgcolor="#003300">';
html += '<div align="center">';
html += '<input name="radiobutton' + _numLinea + '" type="radio" onclick="doIt(this, ' + _numLinea + ');" value="4">'; 
            html += '</div></td><td width="7%" bordercolor="#006600" bgcolor="#003300"><div align="center" class="Estilo21 Estilo13"><div align="left"><strong>A</strong></div></div></td><td width="3%" bordercolor="#006600" bgcolor="#003300"><span class="Estilo25">';
            html += '<input name="radiobutton' + _numLinea + '" type="radio" onclick="doIt(this, ' + _numLinea + ');" value="6">'; 
            html += '</span></td><td width="8%" bordercolor="#006600" bgcolor="#003300"><span class="Estilo10"><strong>B</strong></span></td><td width="3%" bordercolor="#006600" bgcolor="#003300"><div align="center">'; 
html += '<input name="radiobutton' + _numLinea + '" type="radio" onclick="doIt(this, ' + _numLinea + ');" value="8">';
            html += '</div></td><td colspan="2" bordercolor="#006600" bgcolor="#003300"><div align="center" class="Estilo10"><div align="left"><strong>C</strong></div></div><div align="center"></div></td><td width="3%" bordercolor="#006600" bgcolor="#003300"><div align="center" class="Estilo10"><div align="left">'; 
            html += '<input name="radiobutton' + _numLinea + '" type="radio" onclick="doIt(this, ' + _numLinea + ');" value="10">';
            html += '</div></div></td><td width="9%" bordercolor="#006600" bgcolor="#003300"><div align="left" class="Estilo13 Estilo29"><strong>D</strong></div></td><td width="3%" bordercolor="#006600" bgcolor="#003300">';
html += '<input name="checkboxSilueta' + _numLinea + '" id="checkboxSilueta' + _numLinea + '" type="checkbox" onClick="doItSilueta(this, ' + _numLinea +  ' )" disabled>';
html += '</td><td width="16%" bordercolor="#006600" bgcolor="#003300"><span class="Estilo23">Silueta</span></td><td bordercolor="#006600" bgcolor="#003300"><div align="center">'; 
            html += '<input name="t' + _numLinea + '" id="t' + _numLinea + '" type=text style=" text-align: right" value="0" size="8" >'; 
            html += '<span class="Estilo34">&euro;</span></div></td><td rowspan="7"> </td><td width="1%"> </td></tr>';
return html;
}
</script>
</head>
<body>
<form name="formulario" method="POST" action=""> 
<table width="103%" height="1235"  border="0" cellspacing="0">
<tr>
<td height="21" colspan="19"> 
<table width="100%"  border="0" cellspacing="0">
<tr>
<td height="65" colspan="17">
<div align="center" class="Estilo16">
<p>COMPRA DE FOTOGRAF&Iacute;AS </p>
</div>
</td>
</tr>
<tr>
<td colspan="2"> </td>
<td width="16%" bgcolor="#006600">
<div align="center" class="Estilo13"><span class="Estilo29">N&ordm; de fotograf&iacute;a</span></div>
</td>
<td colspan="11" bgcolor="#006600">
<div align="center" class="Estilo13"><span class="Estilo29">Seleccione la categor&iacute;a y si desea la silueta</span></div>
<div align="center" class="Estilo13"></div>
</td>
<td width="15%" bgcolor="#006600">
<div align="center"><span class="Estilo13"><span class="Estilo29">Precio</span></span></div>
</td>
<td width="1%" bgcolor="#000000"> </td>
</tr>
<script>
generaLineas();
</script>
<tr>
<td colspan="2"> </td>
<td height="30" colspan="12" bordercolor="#006600" bgcolor="#000000">
<div align="right" class="Estilo39">
<div align="right">Total compra: </div>
</div>
</td>
<td bordercolor="#006600" bgcolor="#000000">
<div align="center"><span class="Estilo32"> 
                <input id="totalcompra" name="totalcompra" type="text" style=" text-align: right" size="8" value="0"> 
                <span class="Estilo34">&euro;</span> </span></div>
</td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td height="31" colspan="12" bordercolor="#006600" bgcolor="#000000">
<div align="right" class="Estilo32">
<div align="right"><span class="Estilo29"><strong>+IVA 18% </strong></span></div>
</div>
</td>
<td bordercolor="#006600" bgcolor="#000000">
<div align="center"><span class="Estilo32"> 
                    <input id="iva" name="iva" type="text" style=" text-align: right" size="8" value="0"> 
                <span class="Estilo34">&euro;</span> </span></div>
</td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td colspan="10" bordercolor="#006600" bgcolor="#000000"> </td>
<td colspan="2" bordercolor="#006600" bgcolor="#CCCCCC">
<div align="center" class="Estilo32"><span class="Estilo24">Total a pagar:</span></div>
</td>
<td bordercolor="#006600" bgcolor="#CCCCCC">
<div align="center" class="Estilo32"> 
                  <input id="totalapagar" name="totalapagar" type="text" style=" text-align: right" size="8" value="0"> 
                  <span class="Estilo25"><span class="Estilo36">&euro;</span></span></div>
</td>
<td> </td>
</tr>
</table>
</td>
<td> </td>
</tr>
<tr>
<td height="21"> </td>
<td width="41%" colspan="4"> </td>
<td colspan="6"> </td>
<td colspan="8"> </td>
<td> </td>
</tr>
</table>
</form> 
</div>
<div id="Layer3" style="position:absolute; width:39px; height:51px; z-index:2; left: 243px; top: 39px;">
<div align="center"><img src="htdocs/imagenes/png/iconos/tarjeta.png" width="50" height="43"></div>
</div>
<div id="Layer2" style="position:absolute; width:394px; height:48px; z-index:1; left: 301px; top: 39px;">
<div align="left"><span class="Estilo5"> COMPRAR </span> </div>
</div>
</div>
<div id="Layer5" style="position:absolute; width:200px; height:307px; z-index:1; left: -97px; top: 2px;"> 
</html>

Espero que te sirva. Un saludo:
Carlos.
Añade un comentario a esta respuesta
Añade tu respuesta
Haz clic para o
Escribe tu mensaje
¿No es la respuesta que estabas buscando? Puedes explorar otras preguntas del tema Javascript o hacer tu propia pregunta: