Estou a fazer um login utilizando function e estou um problema pois vi na net um que utilizava o seguinte código:
$("button.fazer-login").click(function(){
é possivel alterar o Button por image?
Código (Javascript):
Código (HTML):
$("button.fazer-login").click(function(){
é possivel alterar o Button por image?
Código (Javascript):
$(function(){
// Ao clicar para mostrar o formulário de login
$("button.fazer-login").click(function(){
$("#login-container").fadeIn("fast");
});
// Ao clicar para fechar o formulário de login
$("button.fechar-login").click(function(){
$("#login-container").fadeOut("fast");
});
// Se preferir que o login seja por AJAX
$("#login-container #login").submit(function(e){
// O e.preventDefault impede do formulário ser enviado para o faz_login.php, recarregando a página imediatamente
e.preventDefault();
$.ajax({
type: 'POST',
url: 'faz_login.php',
data: $("#login").serialize(),
success: function(data){
// Mostrar a resposta em um alert
alert(data);
// Ou se preferir fazer o debug pelo console
console.log(data);
}
});
});
});
Código (CSS):// Ao clicar para mostrar o formulário de login
$("button.fazer-login").click(function(){
$("#login-container").fadeIn("fast");
});
// Ao clicar para fechar o formulário de login
$("button.fechar-login").click(function(){
$("#login-container").fadeOut("fast");
});
// Se preferir que o login seja por AJAX
$("#login-container #login").submit(function(e){
// O e.preventDefault impede do formulário ser enviado para o faz_login.php, recarregando a página imediatamente
e.preventDefault();
$.ajax({
type: 'POST',
url: 'faz_login.php',
data: $("#login").serialize(),
success: function(data){
// Mostrar a resposta em um alert
alert(data);
// Ou se preferir fazer o debug pelo console
console.log(data);
}
});
});
});
#login-container{
background: rgba(0,0,0,0.8);
width:100%;
height:100%;
margin:0;
padding:0;
position:fixed;
z-index:999;
}
#login{
margin:0 auto;
width:500px;
height:500px;
text-align:center;
margin-top:100px;
}
#login input[name=usuario]{
margin:0px 0 5px;
}
#login input[type=submit]{
margin:15px 0 5px;
}
background: rgba(0,0,0,0.8);
width:100%;
height:100%;
margin:0;
padding:0;
position:fixed;
z-index:999;
}
#login{
margin:0 auto;
width:500px;
height:500px;
text-align:center;
margin-top:100px;
}
#login input[name=usuario]{
margin:0px 0 5px;
}
#login input[type=submit]{
margin:15px 0 5px;
}
Código (HTML):
<td>
<div class='dizzy'>
<div id="login-container" style="display:none">
<form id="login" method="post" action="faz_login.php">
<input type="text" placeholder="Usuário" name="usuario" /><br/>
<input type="password" placeholder="Senha" name="senha" /><br/>
<input type="submit" value="Entrar" /><br/>
<button class="fechar-login">Fechar login</button>
</form>
</div>
<img class="fazer-login" src="images/Consulta.PNG" >
<span>Alterar Registo</span><br/><br/>
</td>
</div>
<div class='dizzy'>
<div id="login-container" style="display:none">
<form id="login" method="post" action="faz_login.php">
<input type="text" placeholder="Usuário" name="usuario" /><br/>
<input type="password" placeholder="Senha" name="senha" /><br/>
<input type="submit" value="Entrar" /><br/>
<button class="fechar-login">Fechar login</button>
</form>
</div>
<img class="fazer-login" src="images/Consulta.PNG" >
<span>Alterar Registo</span><br/><br/>
</td>
</div>