We are having a issue when trying to login. Is we send our username and password over a XMLhttprequest as post there parameters do not seem to be send with them and therefor we are unable to login.
The code is as following:
Javascript file
$("#submit").click(function(){
console.log("click");
usernm= document.getElementById("username").value;
passwd= document.getElementById("password").value;
var send2 = "username=" + usernm + "&password=" + passwd;
var request = new XMLHttpRequest;
request.open('POST' , "myurl.com/login.php",true);
request.dataType=('jsonp');
request.setRequestHeader("Content-type","application/x-www-form- urlencoded");
request.onreadystatechange = function() {//Call a function when the state changes.
if(request.readyState == 4 && request.status == 200) {
alert(request.responseText);
}
}
request.send(send2);
The login.php is this
require_once 'connect.php';
session_start();
$uName = ($_GET['username']);
$pWord = ($_GET['password']);
$login = "SELECT Username,Password FROM User WHERE Username = '$uName' and Password='$pWord'";
$res = mysql_query($login);
$num_row = mysql_num_rows($res);
$row=mysql_fetch_assoc($num_row);
if( $num_row == 1 ) {
echo "true";
}
else {
echo "false";
}
You collapsed both POST and GET method,
Modify this one,
$uName = ($_POST['username']);
$pWord = ($_POST['password']);
$uName = ($_POST['username']);
$pWord = ($_POST['password']);
Related
I am sending echoing some data to be received in Javascript however when i debug it, it seems that a new line has been added.
PHP
<?php
header("Content-Type: application/json; charset=UTF-8");
require './connection.php';
$obj = json_decode($_POST["x"], false);
$usernamequery = "SELECT * FROM User WHERE username='$obj->newUser'";
$result = mysqli_query($db, $usernamequery);
$row = mysqli_fetch_assoc($result);
if($row["Username"] == null){
$updatequery = "UPDATE User SET User='$obj->newUser' WHERE username ='$obj->username'";
$result = mysqli_query($db, $updatequery);
echo "valid";
} else{
echo "invalid";
}
?>
JS
///// USERNAME
$(document).ready(function () {
$("#userSubmitForm").on("click", function(e) {
$username = document.getElementById("user").value;
$newUser = document.getElementById("newUser").value;
user = $newUser;
obj = { "username":$username, "newUser":$newUser};
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
validity = this.responseText;
if (validity === "valid"){
$('#usernameModal .modal-header .modal-title').html("Result");
$('#usernameModal .modal-body').html("Your Username Has Been Changed to '$newUser'");
$("#passSubmitForm").remove();
$("#userCloseForm").remove();
window.setTimeout(redirect,3000);
} else{
$('#error').html("This Username Already Exists"); ;
}
}
};
What is happening is responseText will be receive "valid"/"Invalid" as "valid[newline]"/"invalid[newline]"
As stated at http://php.net/manual/en/function.echo.php that can't be a "problem" of the echo. There must be some newline-character after your -tags
A simple solution would be to just trim your response text like this: var validity = this.responseText.trim(); in order to strip it from unwanted space/tab/newline characters.
Still havent solved this. Can someone help me with my new, updated code. The new code is at the bottom of this post.
Im learning PHP and right now Im trying to learn to pass data from JS to PHP using AJAX.
This is my form:
<form id="login">
<label><b>Username</b></label>
<input type="text" name="username" id="username"
required>
<label><b>Password</b></label>
<input type="password" name="password" id="password"
required>
<button type="button" id="submitLogin">Login</button>
</form>
First I have a function, something like this:
try {
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
}else{
Do stuff }
}
catch(error){ alert('"XMLHttpRequest failed!' + error.message); }
After this, Im trying to send my form data to a php-file, using new FormData(), but Im not really sure how to do this. Right now I have a code like this:
if (getElementById('username').value != "" & getElementById('password').value != "") {
request.addEventListener('readystatechange', Login, false);
request.open('GET', 'login.php', true);
request.send(new FormData(getElementById('login')));
}
The login-function is a function to test
if (request.readyState === XMLHttpRequest.DONE && request.status === 200) {
In my PHP-file I have a function looking like this right now:
session_start();
$logins = array('username1' => 'password1','username2' => 'password2');
if(isset($_GET['login'])) {
$Username = isset($_GET['username']) ? $_GET['username'] : '';
$Password = isset($_GET['password']) ? $_GET['password'] : '';
if (isset($logins[$Username]) && $logins[$Username] == $Password){
do stuff
}
What more do I need to pass my form data from the js-file to the php-file, so I can check if the input data is the same as the data I have in the array?
-----------------------------------------------------------------------
New code:
function LoginToSite() {
if (getElementById('username').value != "" && getElementById('password').value != "") {
request.addEventListener('readystatechange', Login, false);
var username = encodeURIComponent(document.getElementById("username").value);
var password = encodeURIComponent(document.getElementById("password").value);
request.open('GET', 'login.php?username='+username+"&password="+password, true);
request.send(null);
}
}
function Login() {
if (request.readyState === 4 && request.status === 200) {
alert("READY");
var myResponse = JSON.parse(this.responseText);
getElementById("count").innerHTML = myResponse;
getElementById('login').style.display = "none";
if(request.responseText == 1){
alert("Login is successfull");
}
else if(request.responseText == 0){
alert("Invalid Username or Password");
}
}
else{
alert("Error :Something went wrong");
}
request.send();
}
session_start();
$username = $_REQUEST['username'];
$password = $_REQUEST['password'];
if($username != '' and $password != ''){
foreach($user_array as $key=>$value){
if(($key == $username) && ($value == $password)){
echo "1";
}else{
echo "0";
}
}
}else{
echo "0";
}
When im trying to login, the site first alert that something went wrong, then the same thing happens again and after that, it alerts "ready". What do I have to change to get this right?
Try running the following code.
HTML :
<form id="login">
<label><b>Username</b></label>
<input type="text" name="username" id="username"
required>
<label><b>Password</b></label>
<input type="password" name="password" id="password"
required>
<button type="button" id="submitLogin">Login</button>
</form>
JavaScript:
function submitLogin{
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var http = new XMLHttpRequest();
var url = "login.php";
var params = "username="+username+"&password="+password;
http.open("POST", url, true);
//Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.onreadystatechange = function() {//Call a function when the state changes.
if(http.readyState == 4 && http.status == 200) {
if(http.responseText == 1){
alert("Login is successfull");
}
else{
alert("Invalid Username or Password");
}
}
else{
alert("Error :Something went wrong");
}
}
http.send(params);
}
PHP:
<?php
session_start();
$logins = array('username1' => 'password1','username2' => 'password2');
if(isset($_POST['username']) && isset($_POST['password'])){
$username = trim($_POST['username']);
$password = trim($_POST['password']);
foreach($logins as $key=>$value){
if(($key == $username) && ($value == $password)){
echo "1";
}else{
echo "0";
}
}
}else{
echo "0";
}
?>
I hope this helps you.
Basically you need something like this (JS side)
// create and open XMLHttpRequest
var xhr = new XMLHttpRequest;
xhr.open ('POST', 'login.php'); // don't use GET
// 'onload' event to handle response
xhr.addEventListener ('load', function () {
if (this.responseText == 'success')
alert ('successfully logged in.');
else
alert ('failed to log in.');
}, false);
// prepare and send FormData
var fd = new FormData;
fd.append ('username', document.getElementById("username").value);
fd.append ('password', document.getElementById("password").value);
xhr.send (fd);
PHP code (login.php) may look like this.
# users array
$logins = array ( 'username1' => 'pwd1', 'username2' => 'pwd2' );
# validate inputs
$u = isset ($_POST['username']) ? $_POST['username'] : false;
$p = isset ($_POST['password']) ? $_POST['password'] : false;
# check login
if ($u !== false && $p !== false && isset ($logins[$u]) && $logins[$u] == $p)
echo "success";
else
echo "error";
Course, it's recommended to check do functions XMLHttpRequest and FormData exist first.
if (window['XMLHttpRequest'] && window['FormData']) {
/* place your Ajax code here */
}
I am really confused at the moment, I am very new to all this just being learning java script and php . I am trying to use ajax to check the db to see if the email exist and then if it is cancel the submit of the form. I cant seem to retrieve the information from the XML. I am probably doing it completely wrong, but that why I am asking here , to lean
So if you could help would be great
JAVA SCRIPT
//validate the sign up/regiser form
function validateForm() {
//Get password varibles
var pass = document.forms["signup"]["sign-up-password"].value;
var confPass = document.forms["signup"]["password-confirm"].value;
//Check if they match
if (pass != confPass) {
alert("Password does not match");
return false;
}
//Ajax functions
if(xmlHttp.readyState==0 || xmlHttp.readyState==4){
alert("im here");
email = document.getElementById('email2').value;
xmlHttp.open("GET", "php/ajaxCom.php?email=" + email, true);
xmlHttp.onreadystatechange = handleServerResponse;
xmlHttp.send(null);
}else{
setTimeout('process()',1000);
}
}
function handleServerResponse(){
if(xmlHttp.readyState==4){
var check=xmlHttp.status;
if(xmlHttp.status==200){
alert("also here 2");
xmlResponse = xmlHttp.responseXML;
xmlDocumentElement = xmlResponse.documentElement;
message = xmlDocumentElement.firstChild.data;
alert(message);
return message;
}
}
}
php/xml
<?php
$status;
if (isset($_GET['email'])) {
$email_in_use = $_GET['email'];
$query = mysqli_query($link, "SELECT * FROM users WHERE email='".$email_in_use."'");
if(mysqli_num_rows($query) > 0){
$status = false;
}else{
if( !mysqli_query( $link, $query ) )
{ $status = mysqli_error( $link ); }
else
{ $status = true; }
}
$xml = new SimpleXMLElement('<?xml version="1.0" encoding="utf-8" standalone="yes" ?><response><status/></response>');
$xml->response->status = $status;
echo $xml->asXML();
echo $status;
}
?>
You are building and handling ajax XMLHttpRequest in an incorrect way.
Also, to be able to receive an XML response - set additional request header(will be shown further).
Change you ajax request as shown below:
var xmlHttp = null; // this variable should be global to access from different functions
...
//Ajax functions
email = document.getElementById('email2').value;
xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", "php/ajaxCom.php?email=" + email, true);
xmlHttp.setRequestHeader("Accept", "text/xml");
xmlHttp.onreadystatechange = handleServerResponse;
xmlHttp.send(null);
...
function handleServerResponse(){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
var check=xmlHttp.status;
var xmlResponse = xmlHttp.responseXML;
var xmlDocumentElement = xmlResponse.documentElement;
message = xmlDocumentElement.firstChild.data;
alert(message);
return message;
} else{
setTimeout('process()',1000);
}
}
<?php
require_once './db_connect.php';
$db = new DB_Connect();
$db->connect();
$data = json_decode($_POST['myData']);
$array=json_decode($_REQUEST['question']);
if(isset($_POST['myData'])){
$obj = json_decode($_POST['myData']);
//some php operation
$q = "insert into questions(question)
values ('". $obj."')";
$result = mysql_query($q) or die(mysql_error());
}
?>
I want to retrieve the JSON data that is being sent from another php page to this page , but I just can't ,,why is that ?
here's the other page
function validateForm()
{
var q = document.forms["form1"]["question"].value;
var T = document.forms["form1"]["title"].value;
if (T == null || T == "")
{
alert("please type you form title first");
return false;
}
if (q == null || q == "")
{
document.getElementById("question").style.color="black";
alert("please enter your question");
return false;
}
question.push(q);
//alert(JSON.stringify(question));
var xhr = new XMLHttpRequest();
xhr.open('post', 'create_form.php',true);
// Track the state changes of the request
xhr.onreadystatechange = function(){
// Ready state 4 means the request is done
if(xhr.readyState === 4){
// 200 is a successful return
if(xhr.status === 200){
alert(xhr.responseText); // 'This is the returned text.'
}else{
alert('Error: '+xhr.status); // An error occurred during the request
}
}
}
// Send the request to send-ajax-data.php
xhr.send({myData:JSON.stringify(question)}); //+encodeURI(JSON.stringify(question))
// addField();
return true;
}
can someone please help me ??
I'm tried to solve this using jquery ajax , it's just the same ,, that's why i tried to use only javascript to solve this
try this
$json = file_get_contents('php://input');
$obj = json_decode($json, TRUE);
instead of this
$data = json_decode($_POST['myData']);
$array=json_decode($_REQUEST['question']);
if(isset($_POST['myData'])){
$obj = json_decode($_POST['myData']);
I am using ajax to login user but this script is not working. When i call login function to execute nothing happens..
function login() {
var login = new XMLHttpRequest;
var e = document.getElementById("email").value;
var p = document.getElementById("password").value;
var vars = "email=" + e + "&password=" + p;
login.open("POST", "http://example.com/app/login.php", true);
login.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
login.onreadystatechange = function(){
if (login.readyState == 4 && login.status == "200") {
var response = login.responseText;
//document.getElementById("status").innerHTML = response;
}
document.getElementById("status").innerHTML = "Loggin in....";
login.send(vars);
if (response == "Sucess") {
window.location.replace("/logged.html");
}
else {
document.getElementById("status").innerHTML == "Login Failed";
}
}
}
login.php contains following codes
require_once('../db_/connection.php');//Holds connection to database
$email = mysqli_real_escape_string($con, $_POST['email']);//Sanitizing email
$pass = md5($_POST['password']);//Hashing password
$sql = "SELECT id FROM users WHERE email='$email' AND password='$pass' LIMIT 1";
$query = mysqli_query($con, $sql);
$check = mysqli_num_rows($query);
if($check < 1){
echo "fail";
//mysqli_close($con);
exit();
}
else{
echo "Sucess";
//mysqli_close($con);
exit();
}
Calling login function does not execute the code.
Line 2: The parentheses are missing after new XMLHttpRequest
Line 15: Your if (response == "Sucess") { ... } is misspelled and it gets executed before the ajax request is returned, because it's asynchronous
I made a working version at JSFiddle for you: http://jsfiddle.net/eRv83/
You might find the MDN referrence helpfull: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest