(1)write code for "loginform.html":
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
</head>
<body>
<div class="modal-dialog">
<div class="modal-content col-md-8">
<div class="modal-header">
<h4 class="modal-title"><i class="icon-paragraph-justify2"></i> User Login</h4>
</div>
<form method="post" id="login_form">
<div class="modal-body with-padding">
<div class="form-group">
<div class="row">
<div class="col-sm-10">
<label>Username *</label>
<input type="text" id="username" name="username" class="form-control required">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-10">
<label>Password *</label>
<input type="password" id="password" name="password" class="form-control required" value="">
</div>
</div>
</div>
</div>
<div class="error" id="logerror"></div>
<!-- end Add popup -->
<div class="modal-footer">
<input type="hidden" name="id" value="" id="id">
<button type="submit" id="btn-login" class="btn btn-primary">Submit</button>
</div>
</form>
<script>
$(document).ready(function(){
$('#login_form').validate();
$(document).on('click','#btn-login',function(){
var url = "login.php";
if($('#login_form').valid()){
$('#logerror').html('<img src="ajax.gif" align="absmiddle"> Please wait...');
$.ajax({
type: "POST",
url: url,
data: $("#login_form").serialize(), // serializes the form's elements.
success: function(data)
{
if(data==1) {
window.location.href = "main.html";
}
else $('#logerror').html('The email or password you entered is incorrect.');
$('#logerror').addClass("error");
}
});
}
return false;
});
});
</script>
</div>
</div>
</body>
</html>
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
</head>
<body>
<div class="modal-dialog">
<div class="modal-content col-md-8">
<div class="modal-header">
<h4 class="modal-title"><i class="icon-paragraph-justify2"></i> User Login</h4>
</div>
<form method="post" id="login_form">
<div class="modal-body with-padding">
<div class="form-group">
<div class="row">
<div class="col-sm-10">
<label>Username *</label>
<input type="text" id="username" name="username" class="form-control required">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-10">
<label>Password *</label>
<input type="password" id="password" name="password" class="form-control required" value="">
</div>
</div>
</div>
</div>
<div class="error" id="logerror"></div>
<!-- end Add popup -->
<div class="modal-footer">
<input type="hidden" name="id" value="" id="id">
<button type="submit" id="btn-login" class="btn btn-primary">Submit</button>
</div>
</form>
<script>
$(document).ready(function(){
$('#login_form').validate();
$(document).on('click','#btn-login',function(){
var url = "login.php";
if($('#login_form').valid()){
$('#logerror').html('<img src="ajax.gif" align="absmiddle"> Please wait...');
$.ajax({
type: "POST",
url: url,
data: $("#login_form").serialize(), // serializes the form's elements.
success: function(data)
{
if(data==1) {
window.location.href = "main.html";
}
else $('#logerror').html('The email or password you entered is incorrect.');
$('#logerror').addClass("error");
}
});
}
return false;
});
});
</script>
</div>
</div>
</body>
</html>
(2)write code for "login.php" file:
<?php
$username=$_POST['username'];
$password =$_POST['password'];
if($username=="om" && $password=="om")
{
echo 1;
}
else
{
echo 0;
}
?>
(3)write simple code for " main.html file":
<html>
<head>
<title> this is my simple form</title>
</head>
<body>
<h1>welcome for successful login</h1>
</body>
</html>
No comments:
Post a Comment