El codigo del formulario es el siguiente:
Código:
<form id="form" onsubmit="return validator(this);" action="....." method="post">
<fieldset>
<legend>Legend1</legend>
<table align="center">
<tr>
<td colspan="5">
Input1: <input type="text" name="input1" id="input1" size="7" disabled="disabled"/>
Input2: <input type="text" name="input2" id="input2" size="7" disabled="disabled"/>
</td>
</tr>
<tr>
<td>Tipo:</td>
<td><input type="radio" name="radiotipo" id="addinfo1" onclick="showInfo(1);"/>addinfo1</td>
<td><input type="radio" name="radiotipo" id="addinfo2" onclick="showInfo(2);"/>addinfo2</td>
<td><input type="radio" name="radiotipo" id="addinfo3" onclick="showInfo(3);"/>addinfo3</td>
<td><input type="radio" name="radiotipo" id="addinfo4" onclick="showInfo(4);"/>addinfo4</td>
</tr>
<tr>
<td><input type="hidden" name="inputhidden1" id="inputhidden1"/></td>
</tr>
</table>
<div id="info"></div><!--En este div se mostrara la tabla segun la eleccion del radio-->
</fieldset>
</form>
Ciando se selecciona uno de los radio se añade codigo html en el div "info". En este codigo html esta el boton y los campos para cada tipo de radio. Pero es sólo eso, código html. Te pongo un trozo del codigo porque entero va a ser demasiado grande:
Código:
function showInfo(tipo){
var tabla1 = "<table align='left'><tr><td colspan='5'><hr /></td></tr><tr><td>";
var tabla2 = "</td></tr><tr align='center'><td colspan='6'><button name='buttonsubmit' id='buttonsubmit' type='submit' onclick='changeDisabled();'>Enviar</button></td></tr></table>";
var tabla; //Cadena de texto que almacenara la construccion de la tabla segun el radio seleccionado
switch(tipo){
case (1):
window.resizeTo(430, 410);
tabla = tabla1;
tabla += "....."; //aqui va codigo html continuando la tabla con inputs en cada celda
tabla += tabla2;
break;
case(2):
window.resizeTo(430, 410);
tabla = tabla1;
tabla += "....."; //aqui va codigo html continuando la tabla con inputs en cada celda
tabla += tabla2;
break;
case (3):
window.resizeTo(430, 410);
tabla = tabla1;
tabla += "....."; //aqui va codigo html continuando la tabla con inputs en cada celda
tabla += tabla2;
break;
case (4):
window.resizeTo(440, 470);
tabla = tabla1;
tabla += "....."; //aqui va codigo html continuando la tabla con inputs en cada celda
tabla += tabla2;
break
default:
break;
}
document.getElementById("info").innerHTML = tabla;
document.getElementById("inputhidden1").value = tipo;
}
La función de validación tiene mucha casuística por lo que su codigo es bastante grande. En realidad, lo único que hago en ella es preguntar si un campo está vacío. Si es así, añado una cadena de texto a un array que más tarde presentaré en un "alert". Además, cambio el color de aquellos campos que están vacíos accediendo a sus "style". por ejemplo:
Código:
if (form.campo1.value == ""){
errores.push("Debe introducir un valor en el campo1");
form.campo1.style.background = "#FF0000";
form.campo1.style.color = "#FFFFFF";
} else {
form.campo1.style.background = "#FFFFFF";
form.campo1.style.color = "#000000";
}
Este es un ejemplo del código que hay en esta función. Este se repite muchas veces para distintos campos. Además, esta función tiene al final lo siguiente:
Código:
if (errores.length != 0){
tratarErrores(errores);
} else {
res = true;
//Habilito ciertos campos
document.getElementById("input1").disabled = false;
document.getElementById("input2").disabled = false;
}
return res;
La función tratarErrores sólo contiene un recorrido del array mostrando en un alert todos aquellas cadenas de texto que contenga dicho array.
Esto es todo. Quizás sea algo enreversado, pero la idea es muy simple. A ver si me puedes ayudar JavierB porque el problema que estoy teniendo es que no se está llamando a la funcion validar una vez que se hace el submit, tenga o no el botón una llamada a otra función (changeDisabled, que hace lo mismo que hay en el else de validator).
¡Nuf!, menuda parrafada, lo siento JavierB.