Mostrar/Ocultar login

Thecrack007 · #1 (**permalink**) 19/01/2011, 11:11

Hola amigos!! Mi duda es la siguiente: quiero crear una subcabecera en mi web que sin pulsar en ella ni nada tenga el siguiente aspecto:

Yo quiero que al pulsar en Entrar, aparezca esto:

Alguien me dice como podría hacer esto con JavaScript?

Muchas gracias de antemano!!

Borsetto · #2 (**permalink**) 19/01/2011, 11:23

Hola Thecrack,

a bote pronto, crearía un par de labels, sin contenido, en las posiciones en las que después aparecerían las cajas de texto.

En el botón 'Entrar', asocia una función al evento onClick que haga lo siguiente:

Código HTML:

document.getElementById('usuario').innerHtml = '<input type=text......>'
document.getElementById('password').innerHtml = '<input type=text......>'

Creo que no tendrías muchos problemas si lo haces así.

saludos

Thecrack007 · #3 (**permalink**) 19/01/2011, 11:24

Cita:

Iniciado por Borsetto

Hola Thecrack,

a bote pronto, crearía un par de labels, sin contenido, en las posiciones en las que después aparecerían las cajas de texto.

En el botón 'Entrar', asocia una función al evento onClick que haga lo siguiente:

Código HTML:

document.getElementById('usuario').innerHtml = '<input type=text......>'
document.getElementById('password').innerHtml = '<input type=text......>'

Creo que no tendrías muchos problemas si lo haces así.

saludos

Me lo puedes explicar con mas detalle por favor?
Muchas Gracias:D

Borsetto · #4 (**permalink**) 19/01/2011, 11:37

Ok ;)

En tu cabecera vas a tener un botón "Entrar" y dos cajas de texto, una para meter el usuario y otra para la password.

Suponiendo que metas los tres en una tabla, te quedaría así:

Código HTML:

<table>
<tr>
<td><input type=submit action='pagina_destino' value='Entrar' onClick=\"javascript:mostrarLogin();\"></td>
<td><label id='label_usuario'></label></td>
<td><label id='label_password'></label></td>
</tr>
</table>

Y tu función mostrarLogin sería la siguiente:

Código HTML:

function mostrarLogin(){

   document.getElementById('label_usuario').innerHtml = "<input type=text id='usuario'>";
   document.getElementById('label_password').innerHtml = "<input type=text id='password'>";
   
}

De esta forma, al hacer click en el botón, se ejecuta la función mostrarLogin, que cambiará mediante el atributo innerHtml el contenido de las dos label, mostrando las cajas de texto de nombre de usuario y password.

Espero habértelo aclarado ;) Posiblemente haya otras fromas de hacerlo, quizá mejores, pero no creo que debas tener muchos problemas en hacerlo así.

saludos

javiercitox · #5 (**permalink**) 19/01/2011, 13:08

también podría meter el contenido a un div con style="display:none", y la función mostrarLogin le cambiaria el display none

Thecrack007 · #6 (**permalink**) 19/01/2011, 13:51

@Borsetto: He probado como me dices tu pero no me funciona no sé porque será.

@javiercitox: Me podrías explicar mejor eso, por favor?

Graciass

_Adrian_ · #7 (**permalink**) 19/01/2011, 17:09

Cita:

Iniciado por Thecrack007

@javiercitox: Me podrías explicar mejor eso, por favor?

Haces un div en el cual metes los dos campos y con CSS le asignas visibility:hidden; (para que sea invisible):

Código HTML:

Ver original<div id="campos">
<input type="text" ... >
<input type="text" ... >
</div>

Código CSS:

Ver original#campos {visibility:hidden;
       ...
       }

Haces la función JavaScript:

Código Javascript:

Ver originalfunction muestraCampos(){
document.getElementById('campos').style.visibility='visible';
}

Y en el botón Entrar llamas la función:

Código HTML:

Ver original<input type="button" ... onclick="muestraCampos();">

Borsetto · #8 (**permalink**) 20/01/2011, 09:29

Cita:

Iniciado por Thecrack007

@Borsetto: He probado como me dices tu pero no me funciona no sé porque será.

@javiercitox: Me podrías explicar mejor eso, por favor?

Graciass

Mmmm... thecrack, si hubieras mirado un poquillo lo hubieras sacado. El error era haber puesto 'innerHtml' cuando es 'innerHTML'... ;) Bueno, no pasa nada, te pongo aquí un standalone muy simple que funciona perfectamente.

Código HTML:

<html><head>
<script>
function mostrarLogin(){
	document.getElementById('label_usuario').innerHTML = "<input type=text id='usuario' size=10>";
	document.getElementById('label_pw').innerHTML = "<input type=text id='password' size=10>";



}

</script>
</head>
<body>

<table style='background-color:green;'>
<tr>
<td><input type='button' value='Entrar' onClick="mostrarLogin();"></td>
<td width=100><label name='label_usuario' id='label_usuario'></label></td>
<td width=100><label name='label_pw' id='label_pw'></label></td>
</tr>
</table>
</body>
</html>

Saludos