cacher le formulaire de connexion avec Jquery

Question

J'ai créé une connexion à partir de cela lorsque vous cliquez sur Envoyer le bouton envoie des variables à la page login_success.php. Mais je veux faire que lorsque je clique sur le bouton de connexion, le formulaire sera fermé. Je peux fermer le formulaire en utilisant Jquery

<script type="text/javascript"> 
$(document).ready(function(){ 
$("button").click(function(){ 
    $(".loginform").hide(); 
}); 
}); 
</script> 

Mais ce formulaire d'heure n'envoie pas de requête au fichier .php. Je l'ai fait comme script addin au fichier .php, puis redirigé vers le site index.html.Il est également bon, mais je peux voir la réflexion.Comment puis-je les combiner?

ceci est ma forme

<div class="loginform"> 
    <form action="php/login.php" method="post" id="login"> 

     <fieldset class="loginfield"> 
        <div> 
      <label for="username">User Name</label> <input type="text" id="username" name="username"> 
     </div> 
     <div> 
      <label for="password">Password</label> <input type="password" id="password" name="password"> 
     </div> 
    </fieldset> 
     <button type="submit" id="submit-go" ></button> 
    </form> 
</div> 

Modifier je fonction NAVEED triste .Je installé Firebug dans Firefox et je peux voir qui fonctionne ma validation de formulaire normal.It envoie et demande à login.php Mais je ne peux pas faire de changement sur mon formulaire. Il ne ferme pas ou les valeurs $ arr ne sont pas affichées sur les balises div.

Answer 1

Vous devez utiliser JSON/combinaison AJAX:

Downlod jQuery

Si votre look formulaire comme ceci:

<script type="text/javascript" src="jquery-1.4.2.js"></script> 
<script type="text/javascript" src="ajax.js"></script> 

<div id='errors'></div> 
<div class='loginform' id='loginform'> 
    <form action="php/login.php" method="post" id="login"> 
    Username:<input type="text" id="username" name="username"> 
    Password:<input type="password" id="password" name="password"> 
    <button type="submit" id="submit-go" value='Login'></button> 
    </form> 
</div> 

Votre code jQuery dans ajax.js fichier à soumettre le formulaire, puis obtenir des données de 'php/login.php' dans JSON et remplir les DIV requis. Si connexion est id du formulaire.

jQuery('#login').live('submit',function(event) { 
    $.ajax({ 
     url: 'php/login.php', 
     type: 'POST', 
     dataType: 'json', 
     data: $('#login').serialize(), 
     success: function(data) { 
      for(var id in data) { 
       jQuery('#' + id).html(data[id]); 
      } 
     } 
    }); 
    return false; 
}); 

votre login.php fichier comme décrit dans l'attribut d'action de formulaire:

$username = $_POST['username']; 
$password = $_POST['password']; 

if($username and $password found in database) { 

    // It will replace only id='loginform' DIV content 
    // and login form will disappear 
    $arr = array ("loginform" => "you are logged in"); 

} else { 

    // It will replace only id='errors' DIV content 
    $arr = array ("errors" => "You are not authenticated. Please try again"); 

} 
echo json_encode($arr); 

Plus de détail:

• How to submit a form in ajax/json:
• General jquery function for all forms

Answer 2

Essayez submit method

$("button").click(function(){ 
    $("form.loginform").submit().hide(); 
}); 

PS Vous ne savez que l'application de gestionnaire onclick à tous <button> éléments sur la page est mauvaise idée, non?

Answer 3

$(document).ready(function(){ 
    $("button").click(function(){ 
     $(".loginform").hide(); 
      return false; 
    }); 
});