Formulario html-javascript

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

Respuesta
1
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>
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
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.

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas

Error en la multiplicacion de varias filas

Tengo un problema con el siguiente codigo. La funcion multiplica solo se ejecuta para la primera fila, pero a medida que ingreso nuevas filas no se ejecuta los mismo me sucede con el combo box que esta en la columna de tipo de gasto Necesito que me...
1 respuesta

¿Cómo usar GetElementsById dentro de un form en javascript?

Tengo un código para calcular promedio de 6 números, pero al insertarlo a un formulario no me funciona, ¿Cómo hago para usarlo con un formulario? AYUDA! Aquí el código <script language="javascript"> function sumar(){ var a, total = 0; var elements =...
1 respuesta

No me funciona a funcion multiplicar

Soy nuevo en este campo Tengo un problema con el siguiente codigo. La funcion multiplica solo se ejecuta para la primera fila, pero a medida que ingreso nuevas filas no se ejecuta los mismo me sucede con el combo box que esta en la columna de tipo de...
1 respuesta

Validar fechas en javascript

Necesitaría a ver si alguien me puede facilitar algún javascript que me valide fechas con formato DD/MM/YYYY HH24:MI:SS
1 respuesta

Sumas y multiplicaciones

Quisiera saber como se hace lo siguiente: Tengo este script: </SCRIPT><SCRIPT LANGUAGE=JavaScript> function Sumar() { var val1; var val2; var val3; val1 = (! ParseInt(document.formulario.sum1.value))?0:parseInt(document.formulario.sum1.value); val2 =...
9 respuestas

Manupilar valores de un select list

Intento pasar valores de un select list multiple a otro, encontre un codigo que lo hace genial. Pero trae un detalle que al pasar los valores lo que se encunetra dentro del <option value=''>TEXTO</option> osea 'TEXTO' . Al pasarlo al otro select ese...
1 respuesta

Mostrar imagen grande en galeria de imagenes

He creado una galeria de imgenes y quiero que al pinchar en la foto esta se haga ms grande. Pero no consigo mostrar la foto en grande te paso el código a ver si me puedes "echar una mano". Gracias <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...
1 respuesta

Problema con decimales en javascript

Tengo esta función javascript en una página jsp: function calcularEfectTot() { var numTit = document.insercionCompraForm.numTitCompr.value; numTit = parseInt(numTit,10); if (isNaN(numTit)) numTit = 0; var precUnit =...
1 respuesta

Función javascript en php

Me gustaría saber como puedo cargar una función javascript desde mi código php, ya que necesito que al pinchar sobre un link me cargue una página que no tenga barra de estado ni de navegación, y la única manera que puedo hacerlo es con una función...
8 respuestas

Validar checkbox dinámicos

Te pido tu ayuda... El problema es que quiero activar varios check(hijo) dependiendo del estado de otro check(padre)... Estos check los genera php según la base de datos.. En tipo visual que así. [] --> Casilla. [] Modulo 1 []A []B []C [] Modulo 2...
1 respuesta