We Keep Coding

Ajax PUT method not hitting the server

I have a login form and I am trying to login using a PUT method as to store the logged-in username. But for some reason it's not hitting the server and not logging in. Could you please help?
I want this to go to the login page and failing to do so. Please help
Below is the code for the same:
HTML:
<form name="login" class="login-form request-form form-horizontal" method="post" id="login-user">
<p class="pl-sign">Please Sign In</p>
<div class="form-group" id="login-fields">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"><span class="text--white glyphicon glyphicon-user"></span></i>
</span>
<input type="text" name="user" id="user" placeholder="Username" class="form-control" required/>
</div>
</div>
</div>
<div class="form-group" id="login-fields">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"><span class="text--white glyphicon glyphicon-lock"></span></i>
</span>
<input type="password" name="pass" id="pass" placeholder="Password" class="form-control" required/>
</div>
</div>
</div>
<input class="view sign-in-app" type="submit" value="Sign In" id="submit-login" />
<div class="forgot-up">
forgot username/password ?
</div>
</form>
jQuery:
$("#login-user").validate({
submitHandler: userLogin
});
function userLogin() {
var username = $('#user').val();
var password = $('#pass').val();
var data = $("#login-user").serialize();
var userUrl = 'http://website.com/DatabaseName/Tablename/' + username + '/login?' + password + '';
console.log(data);
$.ajax({
url: userUrl,
type: 'PUT',
data: data,
success: function(data) {
if (data == 0) {
window.location.href = "http://website.com/page2.html";
} else if (data == -1) {
("#error").html('<span class="error">Incorrect username or password</span>');
} else {
$("#error").fadeIn(1000, function() {
$("#error").html('<div class="alert alert-danger"><span class="glyphicon glyphicon-info-sign"></span> ' + data + ' !</div>');
});
}
}
});
}

If you don't want a form submit to laod a new page (or relaod the current one if action isn't defined in the form), use preventDefault() method on the passed in event to the event handler
function userLogin(e) {
e.preventDefault();
... rest of your code
I'm assuming
submitHandler: userLogin
in the validate object will pass on the event object

Angular validations: Restrict server request if user enters invalid email or password

<form name="LPform" novalidate>
<div class="form-row clearfix">
<label class="lbl-fld" style="margin-left: 12%;width:20%;">Email ID</label>
<input class="mob-adj-inpbx " type="email" name="uemail" ng-model="useremail" placeholder=" me#example.com" ng-required="true"/>
<div class="valid-chk validation-loginpopup" ng-show="LPform.uemail.$dirty && allow_Invalid">
<i style="font-size: 1.15em;padding:0px;" ng-class="{'false':'icon-close', 'true': 'icon-correct'}[LPform.uemail.$valid]" class="icon-correct"></i>
</div>
<div class="error-prompt" ng-show="LPform.uemail.$dirty && allow_Invalid">
</div>
</div>
<div class="form-row clearfix">
<label class="lbl-fld" style="margin-left: 12%;width:20%;">PASSWORD</label>
<input class="mob-adj-inpbx" type="password" name="upassword" ng-model="userpassword" placeholder=" password" ng-required="true"/>
<div class="valid-chk validation-loginpopup" ng-show="LPform.upassword.$dirty && allow_Invalid">
<i style="font-size: 1.15em;padding:0px;" ng-class="{'false':'icon-close', 'true': 'icon-correct'}[LPform.upassword.$valid]" class="icon-correct"></i>
</div>
<div class="error-prompt" ng-show="LPform.upassword.$dirty && allow_Invalid">
</div>
</div>
<div id="server_message" class="form-row clearfix basic-error-msg-loginpopup" ng-show="server_message">
{{server_message}}
</div>
<div class="btn-container clearfix mobile-adj" style="margin-left:17.2%;">
<div class="btn-wrap btn-loginpopup">
<input style="max-height:40px;width:121%;" type="submit" name="commit" value="LOGIN" ng-click="login_request()"/>
</div>
</div>
</form>
This part is displayed to the user and the inputs are validated using angular validations. All validations are working fine.
$scope.login_request = function(){
if(LPform.useremail.$valid && LPform.userpassword.$valid) {
$scope.allow_Invalid = "true";
$http({
method: 'POST',
url: '/users/home_login',
data: {email: $scope.useremail, password: $scope.userpassword}
}).success(function (response) {
console.log(response);
window.location = response.location;
}).error(function (response) {
console.log(response);
$scope.server_message = response.server_message;
});
}
else if(!LPform.useremail.$valid) {
$scope.allow_Invalid = "true";
$scope.server_message = "Please enter valid email.";
}
else if(!LPform.userpassword.$valid) {
$scope.allow_Invalid = "true";
$scope.server_message = "Please enter valid password.";
}
else{
$scope.allow_Invalid = "true";
$scope.server_message = "Request Failed.";
}
};
This part is in javascript file where I want to use the validations to decide whether to send a request to the server or not. The conditions I have used in the if else clause is not working, which I randomly tried btw. I am aware that I can disable Login button, however, I don't want to implement this that way.

I believe your problem is that the form name is bound to $scope and isn't a global variable.
In controller change
LPform
To
$scope.LPform

Jquery Onclick Function not working properly

html form-
<div class="inner-container login-panel id="login_form"">
<h3 class="m_title">SIGN IN YOUR ACCOUNT TO HAVE ACCESS TO DIFFERENT FEATURES</h3>
<div id="login_form" class="loginform">
CREATE ACCOUNT
<input type="text" id="email" name="email" class="inputbox" placeholder="Email">
<input type="password" id="password" name="password" class="inputbox" placeholder="Password">
<button id="loginsubmit" class="btn btn-red">LOG IN</button>
login with facebook
</div>
<div class="links">
FORGOT YOUR USERNAME? / FORGOT YOUR PASSWORD?
</div>
</div>
And javascript code -
console.log("before");
$(document).ready(function (){
console.log("then");
$("#loginsubmit").click(function (){
console.log("success");
e = $("#email").val();
p = $("#pass").val();
if($("#email").val()==""||$("#pass").val()==""){
$("div#ack").html("please enter email and pass");
}
else {
$.post( $("#myForm").attr("action"),
//$("#myForm :input").serializeArray(),
{emailid: e, password: p},
function(data){
$("div#ack").html(data);
});
}
$("#myForm").submit( function(){
return false;
});
});
});
In the console before and then is printing but no response on clicking #loginsubmit . Is there any problem with the javascript code? Please help me to find it out.

Your code is working you have not written div element with #ack id , , If will add this element you can see the responce on button click.

html : <button id="loginsubmit" class="btn btn-red" onclick="logincheck()">LOG IN</button>
Javascript:
function logincheck(){
console.log("success");
e = $("#email").val();
p = $("#pass").val();
if($("#email").val()==""||$("#pass").val()=="")
$("div#ack").html("please enter email and pass");
else
$.post( $("#myForm").attr("action"),
//$("#myForm :input").serializeArray(),
{emailid: e, password: p},
function(data){
$("div#ack").html(data);
});
$("#myForm").submit( function(){
return false;
});
}
Now it is working properly.

kindly use following updated script and html:
javascript:
console.log("before");
$(document).ready(function (){
console.log("then");
$("#loginsubmit").click(function (){
console.log("success");
e = $("#email").val();
p = $("#pass").val();
if($("#email").val()==""||$("#pass").val()==""){
$("div#ack").html("please enter email and pass");
}
else {
$.post( $("#myForm").attr("action"),
//$("#myForm :input").serializeArray(),
{ emailid:e, password:p },
function(data){
$("div#ack").html(data);
},'json');
}
$("#myForm").submit( function(){
return false;
});
});
});
Html:
<div class="inner-container login-panel id="login_form"">
<h3 class="m_title">SIGN IN YOUR ACCOUNT TO HAVE ACCESS TO DIFFERENT FEATURES</h3>
<form action="#" method="post" id="myForm">
<div id="login_form" class="loginform">
CREATE ACCOUNT
<input type="text" id="email" name="email" class="inputbox" placeholder="Email">
<input type="password" id="password" name="password" class="inputbox" placeholder="Password">
<button id="loginsubmit" class="btn btn-red">LOG IN</button>
login with facebook
<div id="ack"></div>
</div>
</form>
<div class="links">
FORGOT YOUR USERNAME? /
FORGOT YOUR PASSWORD?
</div>
</div>

CAPTCHA fails shows alert but form submitting automatically how to stop this

This is basic registration module in this i added captcha works
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="form-register" role="form" id="register-form">
<div>
<input name="name" id="name" type="text" class="form-control" placeholder="User name">
<span class="help-block"></span>
</div>
<div>
<input name="email" id="email" type="email" class="form-control" placeholder="Email address" >
<span class="help-block"></span>
</div>
<div>
<input name="password" id="password" type="password" class="form-control" placeholder="Password">
<span class="help-block"></span>
</div>
<div>
<input name="confirm_password" id="confirm_password" type="password" class="form-control" placeholder="Confirm Password">
<span class="help-block"></span>
</div>
<div>
<td id="imgparent">
<div id="imgdiv">
<img id="img" src="captcha.php">
</div>
<img id="reload" src="images/reload.png">
<input id="captcha1" name="captcha" type="text" class="form-control" placeholder="Enter captcha">
</td>
</tr>
<span class="help-block"></span>
</div>
<button class="btn btn-block bt-login" id="button" type="submit">Sign Up</button>
<h4 class="text-center login-txt-center">Alternatively, you can log in using:</h4>
<a class="btn btn-default facebook_rnd" href="login.php?type=facebook"> <i class="fa fa-facebook modal-icons-rnd"></i> </a>
<a class="btn btn-default google_rnd" href="login.php?type=google"> <i class="fa fa-google-plus modal-icons-rnd"></i> </a>
</form>
it is register.js
$(document).ready(function(){
$("#register-form").validate({
submitHandler : function(e) {
$(form).submit();
},
rules : {
name : {
required : true
},
email : {
required : true,
email: true,
remote: {
url: "check-email.php",
type: "post",
data: {
email: function() {
return $( "#email" ).val();
}
}
}
},
password : {
required : true
},
confirm_password : {
required : true,
equalTo: "#password"
}
},
messages : {
name : {
required : "Please enter name"
},
email : {
required : "Please enter email",
remote : "Email already exists"
},
password : {
required : "Please enter password"
},
confirm_password : {
required : "Please enter confirm password",
equalTo: "Password and confirm password doesn't match"
}
},
errorPlacement : function(error, element) {
$(element).closest('div').find('.help-block').html(error.html());
},
highlight : function(element) {
$(element).closest('div').removeClass('has-success').addClass('has-error');
},
unhighlight: function(element, errorClass, validClass) {
$(element).closest('div').removeClass('has-error').addClass('has-success');
$(element).closest('div').find('.help-block').html('');
}
});
});
it is for CAPTCHA js
// JavaScript Document
$(document).ready(function() {
// Change CAPTCHA on each click or on refreshing page.
$("#reload").click(function() {
$("#img").remove();
$('<img id="img" src="captcha.php" />').appendTo("#imgdiv");
});
// Validation Function
$('#button').click(function() {
var name = $("#username1").val();
var email = $("#email1").val();
var captcha = $("#captcha1").val();
if (name == '' || email == '' || captcha == '') {
} else {
// Validating CAPTCHA with user input text.
var dataString = 'captcha=' + captcha;
$.ajax({
type: "POST",
url: "verify.php",
data: dataString,
success: function(html) {
if ($.trim(captcha) == '2') {
alert('Entered code is wrong');
reloadCaptcha();
return false;
}
validated = true;
$("#button").submit();
alert(html);
}
});
}
});
});
here when all validation are works fine but if the CAPTCHA is wrong then also it submitting he form why?>>
how to stop when CAPTCHA is worng return to form ??

What you're doing here is never what you want to be doing with Captcha.
The reason Captcha exists is to prevent malicious form submissions, meaning that you're not supposed to be able to submit any data to the server without a valid Captcha. However, what you're doing is validating the Captcha in Javascript, then submitting the form.
There is nothing stopping someone from manually calling $('#button').submit() to push whatever data they like to the server. The Captcha is essentially useless; it's like a door with no walls around it.
You'll need to re-implement your Captcha solution to do the validation on the server side, wherever your form is submitting to. First validate the Captcha, then process the form submission.
You could use something like this:
session_start();
if($_POST['captcha'] != $_SESSION['<insert Captcha Session key here>']) { /* invalid captcha */ }

Jquery mobile login without PHP

I want to simulate a mobile app. I have a login in page. Is it possible to validate the form and send the user to another page. I am using a single html page for my mobile app. I do not want to use PHP. What would be the best method to take ? getElementbyID ?
<form id="login" name="login" action="" method="">
<div data-role="fieldcontain">
<label for="username"></label>
<input type="email" name="username" id="username" value="" placeholder="Username" ``required="required"/><br />
</div>
<div data-role="fieldcontain">
<label for="password"></label>
<input type="password" name="password" id="password" value="" placeholder="Password"/><br />
</div>
<a data-role="button" type="submit" name="loginSubmit" id="loginSubmit" placeholder="Login" />Login</a>
</form>

try this one using javascript
formData = {
username: $("#username").val(),
password: $("#password").val()
}
if ($("#username").val() == '') {
alert("Enter your username");
} else if ($("#password").val() == '') {
alert("Enter your password");
} else {
$.ajax({
type: 'POST',
contentType: 'application/json',
url: "https://www.example.com/login.php",
dataType: "json",
data: formData,
success: function(data) {
//success handler
},
error: function(data) {
//error handler
}
});
}