Ocultar / mostrar texto

vistor
24 de Junio del 2009
Soy bastante nuevo en esto de javascript. Últimamente estoy viendo que se pueden hacer cosas muy útiles para tratar los formularios.
El tema es que en mi empresa estoy haciendo una aplicación web de Gestión. En el apartado de dar de alta un cliente nuevo hay que rellenar muchos campos y por lo tanto lo hago en varios pasos para que sea más sencillo. De hecho yo pinto todo el formulario entero, pero en el primer paso quiero que estén activos los campos del formulario de los datos generales, y luego cuando le doy al botón se me activen los campos de datos bancarios... no se si me explico. Eso, con javascript más o menos tengo idea de como hacerlo. Se como ocultar o hacer visibles los diferentes campos a mi antojo. El problema viene con las etiquetas que muestran la información de cada campo. Como puedo ocultar realmente un texto con javascript???

Lo que yo tengo es:

Nombre del banco <input type=text name=nombre_banco disabled>

Pues bien cuando yo le doy a un botón que tengo le pongo el disabled del input a false para mostrarlo. Pero como oculto o muestro la parte que dice "Nombre del banco"??? He leido algo sobre la etiqueta <label> pero me parece que esta no se puede tratar con javascript no??? Es eso cierto???

Muchas gracias de antemano.

Drocher
24 de Junio del 2009
Puedes usar la opción display none (ocultar) o display block que admiten casi todos los tags de html.
Si estructuras correctamente tu formulario, agrupando, por ejemplo toda la información bancaria dentro de una misma fila, puedes ocultar/visualizarla con una única sentencia.

Por ejemplo:
<HTML>
<HEAD>
<TITLE>Ejemplo</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<SCRIPT language="javascript">
function MostrarOcultar (objetoVisualizar) {
if (document.all[objetoVisualizar].style.display=='none') {
document.all[objetoVisualizar].style.display='block';
} else {
document.all[objetoVisualizar].style.display='none';
}
}
</SCRIPT>
</HEAD>

<BODY marginwidth="0" marginheight="0">

<TABLE WIDTH="100%" ALIGN="CENTER" border="1" cellspacing="1" cellpadding="0">
<tr>
<td width="100%" colspan="2" align="left" valign="middle">
Datos Generales del cliente
</td>
</tr>
<tr>
<td valign="middle">
<SPAN onmouseover="this.style.textDecoration='underline';this.style.cursor='hand'" onMouseOut="this.style.textDecoration='none'" onClick="JavaScript:MostrarOcultar('Datos1');">
Datos Bancarios
</SPAN>
</td>
<td valign="middle" >
</td>
</tr>
<TR id=Datos1 style="display:none">
<TD colspan="2">
<TABLE WIDTH="100%" ALIGN="CENTER" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" align="center" valign="middle">
Nombre del banco <input type=text name=nombre_banco disabled>
</td>
</tr>
</TABLE>
</TD>
</TR>
<tr>
<td valign="middle">
<SPAN onmouseover="this.style.textDecoration='underline';this.style.cursor='hand'" onMouseOut="this.style.textDecoration='none'" onClick="JavaScript:MostrarOcultar('Datos2');">
Valor 2
</SPAN>
</td>
<td valign="middle">Descripcion
</td>
</tr>
<TR id=Datos2 style="display:none">
<TD colspan="2">
<TABLE WIDTH="100%" ALIGN="CENTER" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" align="center" valign="middle">
TABLA OCULTA 2
</td>
</tr>
</TABLE>
</TD>
</TR>
</TABLE>

</BODY>
</HTML>

Espero te sea útil, de todas maneras si necesitas cualquier ayuda adicional ponte en contacto conmigo por correo si quieres.
Un saludo

Denis