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 */
}
Related
Here's my JavaScript code to post to my API:
var pageRequest = new XMLHttpRequest();
pageRequest.open("POST", "/api.php", true);
pageRequest.onreadystatechange = function() {
if (pageRequest.readyState === 4 && pageRequest.status === 200) {
console.log(pageRequest.responseText);
}
}
pageRequest.send("firstname=John&lastname=Doe");
And here is my PHP backend code:
<?php
if (isset($_POST["firstname"]) && isset($_POST["lastname"])) {
$first_name = $_POST["firstname"];
$last_name = $_POST["lastname"];
echo "Hello, " . htmlspecialchars($first_name) . " " . htmlspecialchars($last_name);
} else {
echo "Please include all fields.";
}
?>
However, my PHP code just echos "Please include all fields.", and when I try doing
var_dump($_POST);
It returns an empty array. Am I doing something wrong here?
Thanks.
You are likely missing setup of request header:
var pageRequest = new XMLHttpRequest();
pageRequest.open("POST", "/api.php", true);
pageRequest.onreadystatechange = function() {
if (pageRequest.readyState === 4 && pageRequest.status === 200) {
console.log(pageRequest.responseText);
}
}
*** pageRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
pageRequest.send("firstname=John&lastname=Doe");
I'm working on a simple form and validating it through javascript php and AJAX.
Here is the html form snippet just for the password:
Password:
<input type="password" name="password" id="password"
onblur="checkUserInputs('password')"
<span id="password-warning"></span>
<input type="button" name="signup" id="signup"
value ="Sign Up" class="button signup-button"
onclick="signUp()">
<span id="status-field"></span>
Here is the checkUserInput() snippet that fires up on onblur event:
function checkUserInputs(inputId){
var inputField = document.getElementById("password");
var varName = "checkPassword"; /variable name to send to php
var functionToCall = "check_password";//php calls corresponding function based on this string value
if(inputField.value != ""){
//creates ajax object
var ajax = createAjax("POST", "core/proccess_signup.php");
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
ajax.onreadystatechange = function(){
if(ajaxReady(ajax)){
//display error massage
warningDiv.innerHTML = ajax.responseText;
}
}
//now data to php scripts for validation ajax.send(varName+"="+inputField.value+"&functionToCall="+functionToCall);
}
}
SignUp() fires up when clicking signup button:
function signUp(){
var password = document.getElementById("password").value;
//rest of the code to get other inputs values...
//status div to display errors
var statusDiv = document.getElementById("status-field");
if(password !="")//I have other checks too, just shortened the code here {
//setup ajax
var ajax = createAjax("POST", "core/proccess_signup.php");
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
ajax.onreadystatechange = function(){
if(ajaxReady(ajax)){
if(ajax.responseText == "success"){ //registartion was successful
document.getElementById("signup-form").innerHTML =
"Registration was successful";
}else{
statusDiv.innerHTML = "Please check the error massages";
}
}
}
//send all of the data to php scripts for validation ajax.send("functionToCall=signup&username="+username+"&password="+password);
}else{
statusDiv.innerHTML = "Please fill out all of the form data";
return;
}
}
Validate the data in php:
$functionToCall = $_REQUEST['functionToCall'];
if($functionToCall == "check_password"){
check_password();
}else if($functionToCall == "signup"){
check_password();
signup();
}
function check_password(){
if(isset($_POST['checkPassword'])) {
$pass = $_POST['checkPassword'];
if(strlen($pass)< 6 || strlen($pass) > 20){
echo 'password must be min 6 and max 20 characters';
exit();
}
if(preg_match("/\s/", $pass)) {
echo 'Password can not be empty or contain spaces';
exit();
}
echo '';
return true; //if all is good return true so i can check if password validation passed successfully
}
}
Here is the signup function
function signup(){
if(isset($_POST['username'])) {
//here I check just the password
if(check_password()){
echo 'success';
exit();
}
}
well if password entered correctly with no white spaces and length between 6-20, check_password() should be set to true and echo 'success' should be executed, but it DOESN'T. this drives me nuts.
Why echo 'success' never gets executed? Take a look at the code and tell me what I'm doing wrong.
The main problem that I can see is that the check_password function looks for isset($_POST['checkPassword']).
That function is called again by the second ajax request, which doesn't post that value. It posts password.
I would strongly recommend using xdebug if you aren't already. It really helps when stepping through this kind of thing. xdebug
Here's a quick fix to pop in check_password function.
if(isset($_POST['checkPassword']) || isset($_POST['password']) ) {
$pass = (isset($_POST['checkPassword']) ) ? $_POST['checkPassword'] : $_POST['password'];
Also you call the check_password function twice. It might be better to store the return value of that as a variable then pass as a parameter.
First call
if($functionToCall == "signup"){
check_password();
signup();
Second Call (in signup function)
if(check_password()){
echo 'success';
exit();
}
I had to mess with the js a little to make that work , but I'm guessing that was just some mishaps in abbreviating the code for simplicity.
Changes:
Ajax request wasn't working, so edited.
username var wasn't set, so hardcoded to foobar.
Here is the full html page
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>TEST</title>
<script>
function checkUserInputs(inputId){
var inputField = document.getElementById("password").value;
var varName = "checkPassword";
var functionToCall = "check_password";
var warningDiv = document.getElementById("password-warning");
if( inputField != ""){
var params = varName + "=" + inputField + "&functionToCall=" + functionToCall;
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
warningDiv.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("POST","core/proccess_signup.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send( params );
}
}
function signUp(){
var password = document.getElementById("password").value;
//rest of the code to get other inputs values...
//status div to display errors
var statusDiv = document.getElementById("status-field");
if(password !=""){ //I have other checks too, just shortened the code here
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
if( xmlhttp.responseText == "success"){ // registration was successful
statusDiv.innerHTML = "Registration was successful";
}
else{
statusDiv.innerHTML = "Please check the error messages";
}
}
}
xmlhttp.open("POST","core/proccess_signup.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("functionToCall=signup&username=foobar&password="+password);
}
else
{
statusDiv.innerHTML = "Please fill out all of the form data";
return;
}
}
</script>
</head>
<body>
<input type="password" name="password" id="password" onblur="checkUserInputs('password')" />
<span id="password-warning"></span>
<input type="button" name="signup" id="signup" value ="Sign Up" class="button signup-button" onclick="signUp()" />
<span id="status-field"></span>
</body>
</html>
Here is the php (I haven't taken out the duplicate function call)
<?php
$functionToCall = $_REQUEST['functionToCall'];
if($functionToCall == "check_password"){
check_password();
}else if($functionToCall == "signup"){
check_password();
signup();
}
function check_password(){
if(isset($_POST['checkPassword']) || isset($_POST['password']) ) {
$pass = (isset($_POST['checkPassword']) ) ? $_POST['checkPassword'] : $_POST['password'];
if(strlen($pass)< 6 || strlen($pass) > 20){
echo 'password must be min 6 and max 20 characters';
exit();
}
if(preg_match("/\s/", $pass)) {
echo 'Password can not be empty or contain spaces';
exit();
}
echo '';
return true; //if all is good return true so i can check if password validation passed successfully
}
}
function signup(){
if(isset($_POST['username'])) {
//here I check just the password
if(check_password()){
echo 'success';
exit();
}
}
}
This code is inside a JavaScript function triggered by the onsubmit event of a form.
var username = document.register.username.value;
var phpUsernameFree = <?php
$username = "<script>document.write(username)</script>";
$resultTempUsers = mysql_query("SELECT * FROM tempUsers WHERE username = '$username' ") or die(mysql_error());
if( mysql_num_rows($resultTempUsers) == 0 ){
echo 1;
};
?> ;
if( phpUsernameFree == 0){
toggleNew('usernameAlreadyExists', 1);
usernameCounter = 1;
}
I want that if the username already exists in the database a window is shown telling the user that the username already exists.
I've tried deleting all of the php code and simply replacing it by 'echo 1' or 'echo 0', and that worked, so I know that code executes.
I think there's a problem in the attempt to read information from the database.
EDIT:
Okay I've tried doing this with Ajax, didn't work so far. I downloaded jQuery and I'm trying out this code now:
usernameTaken = checkUserExistence(username, 'username');
if( usernameTaken == 1){
toggleNew('usernameAlreadyExists', 1);
usernameCounter = 1;
}
function checkUserExistence(str, type){
var dataString = 'str=' + str + '&type=' + type;
if($.trim(str).length>0 && $.trim(type).length>0){
$.ajax({
type: "POST",
url: "existance.php",
data: dataString,
cache: false,
beforeSend: function(){ $("#submit").val('Sending...');},
success: function(data){
if(data){
return 1;
}else{
return 0;
}
}
});
}
return false;
}
my existance.php looks like this:
<?php
*include connection to database here*
$data = $_POST["data"];
$type = $_POST["type"];
$resultUsers = mysql_query("SELECT * FROM users WHERE username = '$data' ") or die(mysql_error());
if( mysql_num_rows($resultUsers) == 1 ){
echo 1;
}
?>
Currently what happens when using this code is, when I press the submit button, the value changes to 'Sending...' as in the beforeSend attribute, but nothing else happens.
You need AJAX to do that, if you do not want to use Jquery.
Something like this:
<script>
function Login(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("Msg").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "Login.php?q=" + str, true);
xmlhttp.send();
}
}
</script>
Login.php:
$username = $_REQUEST["q"];
$resultTempUsers = mysql_query("SELECT * FROM tempUsers WHERE username = '$username' ") or die(mysql_error());
if( mysql_num_rows($resultTempUsers) == 0 ){
echo "User free";
}else{
echo "User exist";
}
something like that, don't work but is an idea.
The best way is using ajax. you should do something like this:
$("#inputId").keyUp(function(){
//This event, raised when the textbox value changed
//inside this event, you can call ajax function and check user existance and if result is false you can disable the submit button
});
In stead of submit button use normal button, submit form after ajax response depending on the response value.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script>
function checkUserExistence(){
var username = document.register.username.value;
var xmlhttp;
if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest();} else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 ) {
if(xmlhttp.status == 200){
phpUsernameFree = xmlhttp.responseText;
if( phpUsernameFree == 0){
alert("username Already Exists");
} else {
alert("username available.");
register.submit();
}
} else if(xmlhttp.status == 400) {
alert("There was an error 400");
} else {
alert("something else other than 200 was returned");
}
}
}
xmlhttp.open("GET", "service.php?username=" + username, true);
xmlhttp.send();
}
</script>
</head>
<body>
<form id="register" name="register" method="post">
<input type="text" name="username" id="username" value="check" />
<input type="button" id="save" name="save" value="Save" onclick="checkUserExistence();" />
</form>
</body>
</html>
<!-- service.php -->
<?php
$username = $_REQUEST["username"];
$resultTempUsers = mysql_query("SELECT * FROM tempUsers WHERE username = '$username' ") or die(mysql_error());
if( mysql_num_rows($resultTempUsers) == 0 ){
echo 1;
};
?>
<?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']);
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']);