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;
};
?>
Related
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);
}
}
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();
}
}
}
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
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']);