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

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.
Muchas gracias!!!!!! Me has resuelto completamente el problema...te debo unas cañas...
Oye, esto luego lo tengo que conectar con un tpv virtual que va con php...¿No me dará problemas que sea en java verdad? Supongo que con indicar en el php la casilla en cuestión que me pidan enviará el valor,no?
Bueno, de todas formas no quiero abusar. Si no sabes, déjalo, tu ayuda ha sido más que eficaz
Hola de nuevo:
Me alegro de haberte ayudado. Respecto a tu última pregunta, da igual que en la parte del browser uses javascript como estás haciendo (no Java, que es otra cosa) o VBScript. Cuando hagas el post del formulario, lo puedes hacer igual a una página PHP, que a una CGI de las antiguas, que a un Servlet Java o a un Action de Struts (también Java). Los parámetros viajarán igualmente.
Saludos:
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: