bootstrap login form in popup

by Keval Bhatt

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" id="login" data-target="#myModal">Log in</button>
      <button type="button" class="btn btn-info btn-lg" data-toggle="modal" id="logout">Log Out</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Login Form</h4>
        </div>
        <div class="modal-body">
          <form name="form" id="form" class="form-horizontal" enctype="multipart/form-data" method="POST">
                   
                    <div class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                        <input id="user" type="text" class="form-control" name="user" value="" placeholder="User">                                        
                    </div>

                    <div class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                        <input id="password" type="password" class="form-control" name="password" placeholder="Password">
                    </div>                                                                  

                    <div class="form-group">
                        <!-- Button -->
                        <div class="col-sm-12 controls">
                                                  
                        </div>
                    </div>
     <div...

JavaScript

var login = false;
checkLogin();
function checkLogin(){

login?($('#login').hide(),$('#logout').show()):($('#login').show(),$('#logout').hide())
}

$("#form").submit(function(){
    login = true; // you have to apply this  line in success
    checkLogin(); // you have to apply this  line in success
    $('#myModal').modal('hide'); // you have to apply this  line in success
   var formdatatest= $("#form").serializeArray()
  $.ajax({
   type: "POST",
   url: "/your/url",
    data: formdatatest,
   success: function(html){    


   },
   error:function()
   {

   }
  });
return false;
});