hiding login form with Jquery

Question

I created login from that when clicking submit button sends variables to login_success.php page.but I want to make that when I click submit button login form will be close. I can close form using Jquery

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

But this time form does not sends request to .php file. I made it like addin script to .php file and then redirected to index.html site.It also good but I can see reflection.How can I combine them?

this is my form

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

Edit I used function as NAVEED sad .I installed FireBug in firefox and I can see that my form validation works normal.It sends and request to login.php But I cant make any change on my form.It does not close or $arr values not shown on div tags.

Answer 1

Try submit method

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

PS You do know that applying onclick handler to all <button> elements on the page is bad idea, right?

Answer 2

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

Answer 3

You should use JSON/AJAX combination:

Downlod jQuery

If your form look like this:

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

Your jQuery Code in ajax.js file to submit the form and then get data from 'php/login.php' in JSON and fill the required DIVs. If login is id of the form.

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;
});

your login.php file as described in form action attribute:

$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 );

More Detail:

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