I made a login system using Parse.com as a back end and for the life of me I can't figure out why this will not work with the code I have. When the user enters their UserID and password it is supposed to check the parse database and, if found, log them in based upon which role they have. (Send them to menu1, menu2, or menu3 basically). If it can't find them it is supposed to create an alert saying "Username of Password Incorrect" and clear the form.
If you click on the 'Sign In' button as of now it doesn't do anything
The create_account.html successully registers a User in the Parse database with a username and password so I know it connects....I just can't log them in.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Bootstrap-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--Parse-->
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-latest.js"></script>
<script src="//www.parsecdn.com/js/parse-1.6.7.min.js"></script>
<!--Javascript-->
<!--Stylesheet-->
<link rel="stylesheet" type="text/css" href="css/login.css">
<title>index.html</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Study App</h1>
<h2>Please Sign In</h2>
<form class="form-signin">
<div class="form-group">
<input type="text" class="form-control" id="userID" placeholder="User ID">
</div> <!--end User ID-->
<div class="form-group">
<input type="password" class="form-control" id="password" placeholder="Password">
</div> <!--end Password-->
Forgot Password? <!--Not implemented yet-->
<button type="button" class="btn btn-lg btn-block btn-primary">Sign In</button>
</form> <!--end SIGN IN FORM-->
</div> <!--END COLUMN-->
</div> <!--END ROW-->
<div class="row">
<div class="col-xs-12">
<div id="add_User">
<img src="img/add_user.png" alt="Add User Icon" height="42" width="42">
<p>Create Account</p>
</div>
</div> <!--END COLUMN-->
</div> <!--END ROW-->
</div> <!--end container-->
<script src="js/login.js"></script>
</body>
</html>
login.js
$(function()
{
Parse.$ = jQuery;
Parse.initialize("x", "y"); <!--Removed for security-->
});
$('.form-signin').on('submit', function(e)
{
e.preventDefault();
var data = $(this).serializeArray(),userID = data[0].value,password = data[1].value;
Parse.User.logIn(username, password, {
success: function (user) {
var queryRole = new Parse.Query(Parse.Role);
if(queryRole.equalTo('name', 'Student')) {
window.location = "menu1.html"
}
else if (queryRole.equalTo('name', 'Tutor')) {
window.location = "menu2.html"
}
else {
window.location = "professor/professor-menu3.html"
}
},
// If there is an error
error: function (user, error) {
console.log(error);
alert("Username or Password incorrect");
$(".form-signin")[0].reset();
}
});
});
You set userID and password:
var data = $(this).serializeArray(),userID = data[0].value,password = data[1].value;
then you use username and password:
Parse.User.logIn(username, password, {
Also, the way you get the userID and passwordseems a bit dangerous to me, if you ever add other fields in your form before those it'll break.
I would recommend you to switch to:
var username = $('#userID').val();
var password = $('#password').val();
instead.
Also, you don't have a submit button in your form. Change:
<button type="button" class="btn btn-lg btn-block btn-primary">Sign In</button>
to:
<button type="submit" class="btn btn-lg btn-block btn-primary">Sign In</button>
Related
Please check my code and tell me how to make it when click submits button, it goes to a dashboard page. but it does not work. Help.. I think functions not working. I can't figure out what is the problem. I already create my database and I added details in that database.
(I add database and) I will attach GitHub link too. Please check if you have time.
https://github.com/Dushan26/my_assignment.git
<?php
$host="localhost";
$user="root";
$password="";
$db="project_db";
$connect_error = 'Sorry, we\'re experiencing connection issues.';
$con=mysqli_connect($host,$user,$password);
mysqli_select_db($con, 'project_db') or die(mysqli_error($con));
if(isset($_POST['username'])){
$uname=$_POST['txtUsername'];
$password=$_POST['txtPassword'];
$sql="select * from user where email='".$uname."'AND password='".$password."' limit 1";
$result=mysql_query($sql);
if(mysql_num_rows($result)==1){
echo " You Have Successfully Logged in";
exit();
}
else{
echo " You Have Entered Incorrect Password";
exit();
}
}
?>
<html>
<head>
<title>Online class</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<style>
body{
width: 100%;
height: 400px;
background-image:url(../assets/img/online-class.png);
background-size: cover;
}</style>
</head>
<body>
<div class="container">
<div class="row"><!--row 01-->
<div class="col-sm-9 col-md-7 col-lg-5 mx-auto"><!--row 02-->
<div class="card my-5"> <!-- card-->
<div class="card-body"><!--card body-->
<h5 class="text-center my-2"><b>:::LOGIN:::</h5></b><br>
<form class="form" action="" role="form" method="POST">
<div clss="my-5" id="divEmail"><!--txtusername-->
<input type="text" id="email" name="txtUsername" class="form-control" placeholder="Enter Email">
</div><!--end oftxtusername--><br>
<div clss="my-5" id="divPassword"><!-- password-->
<input type="password" id="password" name="txtPassword" class="form-control" placeholder="Enter Password">
</div><!--end of password--><br>
<div clss="my-4"><!-- button-->
<button type="submit" id="btnSubmit" class="btn btn-danger btn-block text-uppercase col-12">Submit</button>
</div><!--end of button-->
<hr class="my-4"><h6>Enter Your Email & Password</h6>
</form><!--end of form-->
</div><!--end of card body-->
</div><!--end of card-->
</div><!--end row 02-->
</div><!--end of row 01-->
</div><!--end of container-->
I think your submit button is a type of a "submit". when it is inside a form and clicked, by default it submit the form regardless of your click function.
you can change the button type to "button" or change the click function to stop the form submit
$("form").submit(function (e) {
e.preventDefault();
// your code here
});
Hello I am working with bootstrap trying to show a warning-div when login/password not filled but it seems like it shows but hide again so not showing at all, here is the code:
<head>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script language="javaScript">
var namePattern = "^[a-z A-Z]{4,30}$";
$(document).ready(function(){
$("#bEnviar").click(function(){
var login = $("#login").val();
var password = $("#password").val();
if( login=="" ){
$("#login").css("display","block");
}
if( password="" ){
}
});
});
</script>
</head>
<body>
<form action="">
<div class="form-group col-md-12">
<label for="login" class="col-form-label">Login</label>
<input type="text" id="login" class="form-control" placeholder="Login">
<div id="login" class="alert alert-danger d-none" role="alert-danger">
Inserte nombre de usuario
</div>
</div>
<div class="form-group col-md-12">
<label for="password" class="col-form-label">Password</label>
<input type="password" id="password" class="form-control" placeholder="Password">
<div id="pass" class="alert alert-danger d-none" role="alert-danger">
Inserte password
</div>
</div>
<div class="form-group col-md-12">
<button type='submit' id="bEnviar" class="btn btn-primary">Ingresar</button>
</div>
</form>
</body>
Javascript is working fine cus i tried an alert and when i press submit button it shows.
Thanks in advance!
You have 3 main errors in your code:
There are 2 elements with the same id login.
If you want to check your input before submit, you shouldn't use type="submit" because it will submit the form anyway when you click the button. Use type="button" if use want to check your input first.
Class d-none has css display: none!important; so you need to remove it if you want the div to display.
Here's the code after fixed these errors:
var namePattern = "^[a-z A-Z]{4,30}$";
$(document).ready(function(){
$("#bEnviar").click(function(){
var login = $("#login").val();
var password = $("#password").val();
if(!login) {
$("#login_error").removeClass("d-none");
} else $("#login_error").addClass("d-none");
if(!password) {
$("#pass").removeClass("d-none");
} else $("#pass").addClass("d-none");
if (login && password) {
// Submit form
}
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form action="">
<div class="form-group col-md-12">
<label for="login" class="col-form-label">Login</label>
<input type="text" id="login" class="form-control" placeholder="Login">
<div id="login_error" class="alert alert-danger d-none" role="alert-danger">
Inserte nombre de usuario
</div>
</div>
<div class="form-group col-md-12">
<label for="password" class="col-form-label">Password</label>
<input type="password" id="password" class="form-control" placeholder="Password">
<div id="pass" class="alert alert-danger d-none" role="alert-danger">
Inserte password
</div>
</div>
<div class="form-group col-md-12">
<button type='button' id="bEnviar" class="btn btn-primary">Ingresar</button>
</div>
</form>
change this
<div id="login_error" class="alert alert-danger d-none" role="alert-danger">
and then in javascript you have to use
$("#login_error").css("display","block");
as two elements can not have same id. You are using login id in input as well as in div which will not work.
There are 2 main things you need to fix.
First make the form action point to the same page. When action="" it reloads the page, when action="#" it points to something within the page.
second, your logic for if (password = "") should be if (password === "") notice assignment vs. comparison.
Then you just need to remove the d-none class from your id=pass div
Here's a working version of your code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<form action="#">
<div class="form-group col-md-12">
<label for="login" class="col-form-label">Login</label>
<input type="text" id="login" class="form-control" placeholder="Login">
<div id="login" class="alert alert-danger d-none" role="alert-danger">
Inserte nombre de usuario
</div>
</div>
<div class="form-group col-md-12">
<label for="password" class="col-form-label">Password</label>
<input type="password" id="password" class="form-control" placeholder="Password">
<div id="pass" class="alert alert-danger d-none" role="alert-danger">
Inserte password
</div>
</div>
<div class="form-group col-md-12">
<button type='submit' id="bEnviar" class="btn btn-primary">Ingresar</button>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
var namePattern = "^[a-z A-Z]{4,30}$";
$(document).ready(function(){
$("#bEnviar").click(function(){
console.log('clicked #bEnviar');
var login = $("#login").val();
var password = $("#password").val();
if( login === "" ){
$("#login").css("display","block");
}
if( password === "" ){
$("#pass").removeClass('d-none');
}
});
});
</script>
</body>
</html>
Hi the page is reloading as the form is getting submitted. You need to prevent the form from getting submitted in case of error.
You can either use event.preventDefault() or return false
Also, the ID needs to be unique for each element. You are using the "login" as id for both the message div and the input element.
Hope the below code snippet helps.
var namePattern = "^[a-z A-Z]{4,30}$";
$(document).ready(function() {
$("#bEnviar").click(function(event) {
debugger;
var login = $("#login").val();
var password = $("#password").val();
if (login === "") {
$("#login-err").removeClass("d-none");
// use prevent default or return false
event.preventDefault()
return false;
}
if (password === "") {
$("#password-err").removeClass("d-none");
// use prevent default or return false
event.preventDefault()
return false;
}
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<form action="">
<div class="form-group col-md-12">
<label for="login" class="col-form-label">Login</label>
<input type="text" id="login" class="form-control" placeholder="Login">
<div id="login-err" class="alert alert-danger d-none" role="alert-danger">
Inserte nombre de usuario
</div>
</div>
<div class="form-group col-md-12">
<label for="password" class="col-form-label">Password</label>
<input type="password" id="password" class="form-control" placeholder="Password">
<div id="password-err" class="alert alert-danger d-none" role="alert-danger">
Inserte password
</div>
</div>
<div class="form-group col-md-12">
<button type='submit' id="bEnviar" class="btn btn-primary">Ingresar</button>
</div>
</form>
The main reason why it is appearing and then disappearing is because your form is getting submitted by default. You need to prevent that by passing the event to the click function and then calling event.preventDefault(), before trying to change the display style.
Another point to note is the use of 1 id for multiple elements. IDs are unique, thus 1 ID per element. So, you should also rename your error divs perhaps to login_error and password_error.
So, you jquery should look thus:
$(document).ready(function () {
$("#bEnviar").click(function (e) {
e.preventDefault(); //Prevent forms default behaviour
var login = $("#login").val();
var password = $("#password").val();
// If the login value is not set
if (!login) {
$("#login_error").css("display", "block"); // This overrides d-none and makes it display
}
// If the password value is not set
if (!password) {
$("#password_error").css("display", "block");
}
});
});
Since the action attribute in your form is empty, you can do away with it and just have <form></form>
I assumed that d-none in your html translates to display-none and sets the display of the error divs to none. If not, you have to first set the error divs to display none in your css before your script fires and sets them to display block.
The CSS below should do that:
<style>
.form-group #password_error,
.form-group #login_error {
display: none;
}
</style>
This question already has answers here:
jQuery AJAX submit form
(20 answers)
Closed 4 years ago.
I created a contact page.
When I click on the submit button, this form sends my form information to the server-side file (PHP), but the submit button does nothing.
I do not get an answer in the AJAX!
<script type="text/javascript">
$(document).ready(function() {
$('#submit').click(function() {
$('#submit').attr('value', 'Please wait...');
$.post("sender.php", $("#contactform").serialize(), function(response) {
$('#success').html(response);
$('#submit').attr('value', 'SEND');
});
return false;
});
});
</script>
<!doctype html>
<html>
<head>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="styles/contactform-style.css" rel="stylesheet" id="contact-from-style" >
<meta charset="utf-8">
<title>My Contact form</title>
</head>
<body>
<section id="contact">
<div class="container prop">
<!-- <div class="well well-sm">
<h3><strong>Contact us Pars Coders </strong></h3>
</div>-->
<div class="row" id="p">
<div class="col-md-7">
<img src="img/email-icon.png" class="img-responsive text-center" alt="Pars Codres" />
</div>
<div class="col-md-5">
<h4><strong>Tmas Ba ma </strong></h4>
<form id="#contactform">
<div class="form-group">
<input type="text" class="form-control" name="name" value="" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" value="" placeholder="E-mail">
</div>
<div class="form-group">
<textarea class="form-control" name="description" rows="3" placeholder="Description"></textarea>
</div>
<button class="btn btn-success" type="submit" name="button" id="submit">
<i class="fa fa-paper-plane-o" aria-hidden="true"></i> Send ...
</button>
<div id="success" style="color: red;">؟</div>
</form>
</div>
</div>
</div>
</section>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</body>
</html>
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['description'];
$to = 's3dhossein#gmail.com';
$subject = 'the subject';
$message = 'FROM: '.$name.' Email: '.$email.'Message: '.$message;
$headers = 'From: s3dhossein#gmail.com' . "\r\n";
if (filter_var($email, FILTER_VALIDATE_EMAIL)) { // this line checks that we have a valid email address
mail($to, $subject, $message, $headers); //This method sends the mail.
echo "Your email was sent!"; // success message
}else{ echo "Invalid Email, please provide an correct email.";
}
?>
Where do you think the problem is?
Can an error come from AJAX?
Found problems:
1) An error is raised: Error: Bootstrap's JavaScript requires jQuery. It means that the bootstrap's js file must be loaded after the jQuery's js file. So invert their positions:
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
2) An error is raised: ReferenceError: $ is not defined for the line $(document).ready(function () {. This means that the jquery is not recognized inside your script. So bring all the js imports in the page head. The times for the js imports at the bottom of the page are long gone.
3) The form tag must be <form id="contactform">, not <form id="#contactform">.
4) If you are submitting through an ajax request, then you must use a button of type "button", not of type "submit". Then you can remove the return false; from the $('#submit').click(function (){...} function too.
Suggestions:
Define an "error" callback for the ajax request.
Define the meta tags as the first ones in the head tags.
Working code:
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
<meta charset="UTF-8" />
<!-- The above 3 meta tags must come first in the head -->
<title>My Contact form</title>
<!-- CSS resources -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="styles/contactform-style.css" rel="stylesheet" id="contact-from-style" >
<!-- JS resources -->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#submit').click(function () {
$('#submit').attr('value', 'Please wait...');
$.post("sender.php", $("#contactform").serialize(), function (response) {
$('#success').html(response);
$('#submit').attr('value', 'SEND');
});
});
});
</script>
</head>
<body>
<section id="contact">
<div class="container prop">
<!-- <div class="well well-sm">
<h3><strong>Contact us Pars Coders </strong></h3>
</div>-->
<div class="row" id="p">
<div class="col-md-7">
<img src="img/email-icon.png" class="img-responsive text-center" alt="Pars Codres" />
</div>
<div class="col-md-5">
<h4><strong>Tmas Ba ma </strong></h4>
<form id="contactform">
<div class="form-group">
<input type="text" class="form-control" name="name" value="" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" value="" placeholder="E-mail">
</div>
<div class="form-group">
<textarea class="form-control" name="description" rows="3" placeholder="Description"></textarea>
</div>
<button class="btn btn-success" type="button" name="button" id="submit">
<i class="fa fa-paper-plane-o" aria-hidden="true"></i> Send ...
</button>
<div id="success" style="color: red;">؟</div>
</form>
</div>
</div>
</div>
</section>
</body>
</html>
In my below code only angular validation is working. When I click on login button, then no angular script works. Can some body help me? Where is my mistake?
HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Talkiedo</title>
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/bootstrapValidator.min.css" rel="stylesheet">
<link href="assets/datatables/css/dataTables.bootstrap.css" rel="stylesheet">
<link href="assets/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="assets/css/style.css" rel="stylesheet">
<script src="assets/bootstrap/js/angular.js"></script>
<script src="assets/bootstrap/js/angular-route.min.js"></script>
<script src="assets/bootstrap/js/angular-resource.min.js"></script>
<script src="assets/bootstrap/js/angular-messages.js"></script>
<script src="loginController.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
\\\
<![endif]-->
<style>
.form-group.required .control-label:after {
content:"*";
color:red;
}
</style>
</head>
<body style="background-color:#EEF2F5;" ng-app="loginApp" ng-controller="loginController">
<div class="container-fluid">
<div class="row">
<div class="col-md-offset-4 col-md-4 well" style="padding-left:50px;padding-right:50px">
<h1>Login</h1>
<form class="form-horizontal" name="adminForm" role="form" ng-submit="submitLogin()" novalidate="novalidate">
<div class="form-body">
<div class="form-group required" ng-class="{'has-error': adminForm.admin_username.$touched && adminForm.admin_username.$invalid }">
<div class="input-group">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
<input type="email" class="form-control" name="admin_username" id="admin_username" ng-model="admin.admin_username" required style="padding-top: 0px;" placeholder="Enter Your Email Id">
</div>
<div class="help-block" ng-messages="adminForm.admin_username.$error" ng-if="adminForm.admin_username.$touched && adminForm.admin_username.$invalid" >
<p ng-message="required">Your email is required.</p>
</div>
</div>
<div class="form-group required" ng-class="{'has-error': adminForm.admin_password.$touched && adminForm.admin_password.$invalid }">
<div class="input-group">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
<input type="password" class="form-control" name="admin_password" id="admin_password" ng-model="admin.admin_password" required style="padding-top: 0px;" placeholder="Enter Your Password">
</div>
<div class="help-block" ng-messages="adminForm.admin_password.$error" ng-if="adminForm.admin_password.$touched && adminForm.admin_password.$invalid" >
<p ng-message="required">Your Password is required.</p>
</div>
</div>
<span class="help-block" id="wrong_password" name="wrong_password"></span>
<div class="form-group">
<div class="input-group">
<div class=" col-sm-6">
<button type="button" class="btn btn-default center-blocks btn-save" ng-disabled="adminForm.$invalid" id="btn-save">Login</button>
</div>
<div class="col-sm-6">
<button type="" class="btn btn-default btn-cancel center-block">Cancel</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="assets/jquery/jquery-2.1.4.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrapValidator.min.js"></script>
<script src="assets/bootstrap-datepicker/js/bootstrap-datepicker.min.js"> </script>
<script src="assets/datatables/js/jquery.dataTables.min.js"></script>
<script src="assets/js/bootbox.min.js"></script>
<script src="assets/js/custome.js"></script>
</body>
</html>
AngularJS code:
// Defining angularjs application.
var loginApp = angular.module('loginApp', ['ngMessages']);
// Controller function and passing $http service and $scope var.
loginApp.controller('loginController', function($scope, $http) {
// create a blank object to handle form data.
$scope.admin = {};
// calling our submit function.
$scope.submitLogin = function() {
// Posting data to php file
alert('dasdas');
if ($scope.adminForm.$valid) {
$http({
method : 'POST',
url : 'http://localhost/talk/admin/login',
data : $scope.admin, //forms user object
headers : {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function(data) {
if (data.errors) {
// Showing errors.
// $scope.errorName = data.errors.address1;
// $scope.errorUserName = data.errors.address2;
// $scope.errorEmail = data.errors.address13;
} else {
$scope.message = data.message;
}
});
}else {
alert("There are invalid fields");
}
};
});
I think you have to change
<button type="button" class="btn btn-default center-blocks btn-save" ng-disabled="adminForm.$invalid" id="btn-save">Login</button>
with a submit type button
<button type="submit" class="btn btn-default center-blocks btn-save" ng-disabled="adminForm.$invalid" id="btn-save">Login</button>
So you can submit your form
The problem is that your button is not a submit, but a normal button, so it does not trigger the submit action.
Try to change the submit button type to submit
If you want to submit the form by using jQuery,than you can doing $('.formClass').submit
I want to do is to keep the email and password in the modal dialog login page if I click the checkbox button and if I refresh the same page and click the modal dialog again the email and password should be still there.
My problem is if I sign in in my login modal dialoge box and checked the keep me logged checkbox and click the button and refreshed the page again the email and password I've typed are gone it wasn't there anymore.
Does anyone here know how to keep what I typed in the email and password in my modal dialog box if I checked the checkbox keep me logged in button?
Whole html code:
<?php
session_start();
$unm=isset($_SESSION['email'])?$_SESSION['email']:'default_username';
$pwd=isset($_SESSION['password'])?$_SESSION['password']:'default_password';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="bootstrap/js/jquery-1.11.0.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript"> <!--submit form script-->
$(document).ready(function(){
$('#sumbit').on('click', function(){
window.location.replace("profile.php");
$('.modal').modal('hide');
});
$('[name="chkbox"]').on('click', function(){
$.post( "savestate.php", { email: $('[name="email"]').val(), email: $('[name="password"]').val() }).done(function( data ) {
alert( "Data Loaded: " + data );
});
});
});
</script>
</head>
<body>
<a data-toggle="modal" href="#myModal"><span class="glyphicon glyphicon-user"></span> Login</a>
<div class="container">
<div class="row">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h5 class="modal-title">PLEASE ENTER YOUR EMAIL ADDRESS AND PASSWORD TO LOG IN.</h5>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input type="text" name="email" value="<?php echo $unm; ?>" class="form-control" placeholder="Enter Email Address..." />
</div>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input type="password" name="password" value="<?php echo $pwd; ?>"" class="form-control" placeholder="Enter Password..." />
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="checkbox" name="chkbox" value="staylogged" class="checkbox-inline" />
<label> Keep me logged in</label> <b>|</b>
Forgot your password?
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" id="submit" name="login" class="btn btn-primary" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-user"></span> Login</button>
<button type="button" id="show_signup_md" class="btn btn-info" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-list-alt"></span> Register</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
savestate.php
<?php
session_start();
$_SESSION['email']=$_POST['email'];
$_SESSION['password']=$_POST['password'];
$unm=isset($_SESSION['email'])?$_SESSION['email']:'default_username';
$pwd=isset($_SESSION['password'])?$_SESSION['password']:'default_password';
?>
You set variables in server side when user clicks check button.Probably by using AJAX.
And then use them in your page when you display the page.
Here is jquery:
$(document).ready(function(){
$('#sumbit').on('click', function(){
window.location.replace("profile.php");
$('.modal').modal('hide');
});
$('[name="chkbox"]').on('click', function(){
if(!$(this).attr('checked'))return;
$.post( "/savestate.php", { email: $('[name="email"]').val(), password: $('[name="password"]').val() }).done(function( data ) {
// alert( "Data Loaded: " + data );
});
});
});
Here is savestate.php
session_start();
$_SESSION['email']=$_POST['email'];
$_SESSION['password']=$_POST['password'];
You can reuse in your php page as
$unm=isset($_SESSION['email'])?$_SESSION['email']:'default_username';
$pwd=isset($_SESSION['password'])?$_SESSION['password']:'default_password';
Why don't use instead jQuery's plugin for cookies?
http://plugins.jquery.com/cookie/
In general terms, it is a really bad practice to store the password in the cookie but if you wan't to do it, I'm no one to tell you not to do it.
Another better solution will be store the information in the session of PHP. Here is a good tutorial of this. Although a still better solution will be store the session in database, so your app is stateless.
Using jQuery's plugin will be as easy as:
jQuery(function () {
$("#email").val($.cookie("unm"));
$("#password").val($.cookie("pwd"));
});
In this way, if there is something in the cookie, the value will be that, otherwise, will be blank. Or you can do
$("#email").val($.cookie("unm") || "Default value for usermane");
To set a default value if the return of that cookie is null (or empty).
You can also use local storage (http://www.w3schools.com/html/html5_webstorage.asp) but I recommend using a server side option.