Ms All Wednesday Ms All Wednesday - 1 month ago 5
Javascript Question

How to make a simple login page in using a bootstrap and JS?

Hello everyone I am starting to learn step by step in web programming. I am planning to create a simple log-in form using a bootstrap and Javascript. What is the way to achieve it?.

Answer

Something like this :)

$(document).ready(function() {
   $("#loginForm").submit(function(e) {
      e.preventDefault();
      if ($("#userEmail").val() != '' && $("#userPassword").val() != '') {
           if ($("#userEmail").val() == 'test@gmail.com' && $("#userPassword").val() == 'test') {
              window.location.href = './home.html'; 
           } else {
               alert('invalid username password');
           }
      } else {
        alert('username or password cann\'t be blank');  
      }
   });
});
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<div class="container" style="margin-top:30px">
    <div class="col-md-4 col-md-offset-4">
        <div class="panel panel-default">
            <div class="panel-heading"><h3 class="panel-title"><strong>Sign in </strong></h3></div>
            <div class="panel-body">
                <form role="form" id="loginForm">
                    <div class="form-group">
                        <label for="exampleInputEmail1">Username or Email</label>
                        <input type="email" class="form-control" style="border-radius:0px" id="userEmail" placeholder="Enter email">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Password <a href="/sessions/forgot_password">(forgot password)</a></label>
                        <input type="password" class="form-control" style="border-radius:0px" id="userPassword" placeholder="Password">
                    </div>
                    <button type="submit" class="btn btn-sm btn-default">Sign in</button>
                </form>
            </div>
        </div>
    </div>
</div>