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