I have a standard login page. When the database validates the credentials entered by the user I want to make changes to the page, example: create element saying "Login Successful", using a static javascript file. How do I communicate to a static javascript file that the login was successful thus triggering the changes? I'm using Parse right now for my database.
html:
<form class="form" method="post">
<div>
<label>Username:</label>
<input class="form-control" id="username" type="text" name="username">
</div>
<div>
<label>Password:</label>
<input class="form-control" id="password" type="password" name="password">
</div>
<input class="btn btn-custom" type="submit" id="loginSubmit" name="loginSubmit" value="Submit">
</form>
Node with Express and Parse:
login.post('/login', function (req, res) {
Parse.User.logIn(req.body.username, req.body.password, {
success: function(user) {
console.log("Login Successful!");
res.redirect('/');
},
error: function(user, error) {
res.redirect('/login');
console.log("Login Unsuccessful! " + error.message);
}
});
});
The solution was using jQuery's Ajax method.
$('#loginSubmit').on('click', function () {
$.ajax({
//...
success: function(data, textStatus, xhr) {
console.log(xhr.status);
if (xhr.status === 200) {
console.log("fun time?");
$('body').css("background-color", "yellow");
}
},
complete: function(xhr, textStatus) {
console.log(xhr.status);
}
});
});
Related
I am facing an issue while sending the data through the PHP script, in Index.php there is a form with some field values and a JavaScript script included in the Index.php which posts an image after I submit the form in Index.php with help of ajax, but Image is not posting/sending through ajax, only form field submission works.
If I call only Ajax during the time of form submission that is working or if I submit the form value all alone working, but if I call together the image is not working.
Index.php
<form enctype="multipart/form-data" method="post" action="saveRecord.php">
<?php include ('imagecropinterface/index.html'); ?>
<div>
<input autocomplete="off" type="text" maxlength="90" placeholder="HeadLine" id="headline" name="headline" style="width:386px;">
</div>
<div class="mt-2">
<input autocomplete="off" type="text" maxlength="90" name="subtitle" placeholder="Sub Title" style="width:386px;">
</div>
<div>
<input id='jour' type='text' value="" class=''>
</div>
<div>
<textarea name="fullText" placeholder="Synopsis" style="width:386px;"></textarea>
</div>
<input class="btn btn-secondary" name="save" id="btnid" value="Save" type="submit">
</form>
index.html
const downloadAllBtn = document.getElementById("btnid");
downloadAllBtn.addEventListener("click", downloadAll);
function downloadAll() {
$.ajax({
type: "POST",
url: "/ap-beta2/saveRecord.php",
data: {
data: imagesBase64,
},
cache: false,
error: function (err, data) {
console.log("There was an error. Try again please!" + data, err);
},
success: function (data) {
console.log(data);
},
});
}
saveRecord.php
if (isset($_POST['save']) && isset($_POST['data'])) {
echo ($_POST[data]);
echo ($_POST['headline']);
echo ($_POST['subtitle']);
}
How can I submit the form so that form value and ajax call POST together to the PHP page?
As suggested by #ADyson I have updated Ajax script, unfortunately, no progress!!
In the form, I put the id saveform
<form enctype="multipart/form-data" id = "saveform" method="post" action="saveRecord.php">
function downloadAll() {
$("#saveform").click(function (e) {
$.ajax({
type: "POST",
url: "https://myimpact.in/ap-beta2/saveRecord.php",
data: {
data: imagesBase64,
},
cache: false,
error: function (err, data) {
console.log("There was an error. Try again please!" + data, err);
},
success: function (data) {
console.log(data);
},
});
e.preventDefault();
});
}
I am little bit new to jQuery. I have jQuery code as follow :
function callfunction() {
var email = $("#email").val();
var passwrd = $("#password").val();
$.ajax({
url: "checklogin.php?email="+email+"&pass="+passwrd,
type: "post",
success: function (response) {
if(response == '1') {
alert('Login Successfull. Proceed to pay now');
$('#getre').show();
$('#signuplink').hide();
$('#password2').hide();
$('#login').hide();
$('#email').attr('disabled','disabled');
return true;
}
if(response == '0') {
alert('Login Failed !!! Try Again');
return false;
}
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
}
and its HTML code is as follow :
<form class='form form-inline' style="margin-top:20px;" method="post"
action="#">
<input type="text" name="email" id="email" class="amount form-control required" Placeholder="Enter Email ID" required="">
<input type="password" name="password" id="password" class="amount form-control required" Placeholder="Enter Password" required="">
<input type="submit" name="getr" class="mob-btn btn btn-primary btn-info-full" value="Login" onClick="return callfunction()">
</form>
When I am submitting the form and response ==0 then the form is submitting the data while I dont want to submit the data is response=0.
How I can achieve this ?
take out type="submit" from your submit button element. This will prevent the form from being submitted before the ajax request is fired off.
<input name="getr" class="mob-btn btn btn-primary
btn-info-full" value="Login" onClick="callfunction()">
then when you receive your ajax response you can call form.submit() like so:
$.ajax({
url: "checklogin.php?email="+email+"&pass="+passwrd,
type: "post",
success: function (response) {
if(response == '1')
{
$('.form-inline').submit();
alert('Login Successfull. Proceed to pay now');
$('#getre').show();
$('#signuplink').hide();
$('#password2').hide();
$('#login').hide();
$('#email').attr('disabled','disabled');
}
if(response == '0')
{
alert('Login Failed !!! Try Again');
}
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
SITUATION:
I used to check my recaptcha with a simple form submit with POST to "/login".
I need to change my implementation for security reasons and would like to do something like:
1) Jquery form submit.
2) Make call to server to call verify recaptcha on the server.
3) Receive response without reloading page.
4) Accept login request or not based on response.
QUESTION:
It looks like I could make an AJAX request ? But I don't know how.
CLIENT CODE:
<div class ="containerMargins">
<h1 class = "authTitle">Login</h1>
<form id="loginForm">
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" name="email" id="loginEmail" placeholder="You can't forget it :)" required>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" name="password" id="loginPassword" placeholder="We hope you didn't forget it ^^" required minlength="12">
</div>
<div class="g-recaptcha" data-sitekey="6LcRrxMUAAAAANx-AXSdRLAo4Pyqfqg-1vuPSJ5c"></div>
<button class="btn btn-default" id="loginButton">Submit</button> <span class="userLinks">
<a class="logLinks" href="/users/register">Register</a>Password?</span>
</form>
</div>
</div>
<% include ../partials/indexScripts %>
<script>
$("#loginForm").submit(function(e) {
e.preventDefault();
var email = $("#loginEmail").val();
var password = $("#loginPassword").val();
// WOULD LIKE TO MAKE SERVER CALL HERE TO CHECK RECAPTCHA BUT I DONT KNOW HOW
$this = $(this);
$.ajax({
type: "POST",
url: "users/register",
data: $this.serialize()
}).done(function(data) {
if (successfulRecaptcha) {
firebase.auth().signInWithEmailAndPassword(email, password ).then( authData => {
}
else {
console.log("You are a robot!");
}
SERVER CODE:
router.post('/login', function(req, res, next) {
verifyRecaptcha(req.body["g-recaptcha-response"], function(success) {
if (success) {
} else {
}
});
});
I found the solution :
FRONT END:
$this = $(this);
$.ajax({
type: "POST",
url: "login",
data: $this.serialize()
}).done(function(data) {
if (data == true) {
BACKEND:
router.post('/login', function(req, res, next) {
verifyRecaptcha(req.body["g-recaptcha-response"], function(success) {
if (success) {
res.send(true);
} else {
res.send(false);
}
});
});
i can't see any AJAX request to the webservice.php ( i use firebug), but i don't know why!
HTML Code:
<form id="form_login" name="form_login" method="POST">
E-Mail: <input type="text" size="30" name="email" id="email"></br>
Passwort: <input type="text" size="30" name="password" id="password"></br>
DeviceID: <input type="text" size="30" name="deviceid" id="deviceid"></br>
<input type="submit" value="Login" name="submit_login" />
JS Code:
$(function () {
$('form_login').on('submit_login', function (e) {
$.ajax({
type: "GET",
url: "webservice.php?method=CheckUserLogin",
data: $('form_login').serialize(),
success: function (response) {
alert(response);
},
failure: function (response) {
alert(response);
}
});
e.preventDefault();
});
});
It doesn't work, but i really don't know why...
$('form_login').on('submit_login', function (e) {
should be:
$('#form_login').on('someevent','[name="submit_login"]', function (e) {
and
data: $('form_login').serialize(),
should be:
data: $('#form_login').serialize(),
# is used to select the element with id, and [] is used to select element with attribute.
$('form_login').on('submit_login', function (e) {
should be:
$('form_login').on('submit', function (e) {
because submit_login is not a valid parameter!
I have some trouble combining client side validation and server side validation in AngularJS. Here's the HTML:
<form class="form-login" name="loginForm" novalidate ng-submit="login()">
<fieldset>
<h2>Login</h2>
<input type="text" required class="input-block-level" placeholder="Username" ng-model="username" name="username">
<div ng-show="loginForm.username.$dirty && loginForm.username.$invalid">
<span ng-show="loginForm.username.$error.required">Username required.</span>
</div>
<input type="password" required class="input-block-level" placeholder="Password" ng-model="password" name="password">
<div ng-show="loginForm.password.$dirty && loginForm.password.$invalid">
<span ng-show="loginForm.password.$error.required">Password required.</span>
</div>
<div ng-show="loginForm.username.$dirty && loginForm.password.$dirty && loginForm.$invalid">
<span>Invalid username or password</span>
</div>
<p>Forgot password?</p>
<p><button class="btn btn-primary btn-large" ng-disabled="loginForm.$invalid" type="submit">Login</button></p>
</fieldset>
</form>
...and here's the login function:
$scope.login = function() {
$http.post('url', {
"password": $scope.password
}).success(function(data, status, headers, config) {
console.log(status);
console.log(data);
}).error(function(data, status, headers, config) {
if (404 === status) {
$scope.loginForm.$invalid = true;
}
});
return false;
}
The client side validation works fine until I submit the form and get back a 404 status. When the 404 status is returned the loginForm.$invalid error shows up but the client side validation doesn't change the form state back to valid when I change the username and password inputs again.
Is there a standard way to do this kind of client side + server side validation in the same form?
I don't think you're supposed to modify form $invalid or $valid directly. You should be doing it via $setValidity(validationErrorKey, isValid).
Why not just store "invalid username/password" status in a separate scope property?
$scope.login = function() {
$http.post('url', {
"password": $scope.password
}).success(function(data, status, headers, config) {
console.log(status);
console.log(data);
}).error(function(data, status, headers, config) {
if (404 === status) {
$scope.invalidUsernamePassword = true; // <--------------
}
});
return false;
}
And the template will be simpler:
<div ng-show="invalidUsernamePassword">
<span>Invalid username or password</span>
</div>
Here is a nice server side validation directive that might be usefull https://groups.google.com/forum/#!msg/angular/6v-AillQboI/D0OaZzV7Me0J