yunusus yunusus - 6 months ago 26
PHP Question

Javascript Show Button If Functions Return True

I'm trying to do a registration form. I'm checking 6 thing with three function if everything okey function returns true else false. First function checks Username length, username characters and username availability. Second function checks email validation and email availability. Third function checks pass match. Functions working good everything is okey until here. But I want to hide button at the first then if all the functions return true I want to show button. But It doesn't work.. Where am I wrong ? Thanks all :)

$(document).ready(function() {

$("#rname").attr('maxlength','15');
$("#rmail").attr('maxlength','50');
$("#rpass").attr('maxlength','50');


//--------------------------------------------------// MaxLenght Settings

$("#rname").keyup(function() {

var uname = checkUsername();

}); // Username keyup

//--------------------------------------------------// Username Checking

$("#rmail").keyup(function() {

var umail = checkEmail();

}); // Email keyup

//--------------------------------------------------// Email Checking

$("#passone, #passtwo").keyup(function() {

var upass = checkPass();

}); // Email keyup

//--------------------------------------------------// Password Checking

$("#rname, #rmail, #passone, #passtwo").keyup(function() {

var btn = button(uname,umail,upass);

}); // button show hide

//--------------------------------------------------// Button

}); //--------------------------------------------------// Document Ready Ends

function checkUsername() {

var chars = /^[a-zA-Z0-9\.\_]*$/;

var username = document.getElementById("rname").value;

if(chars.test(username) == true) {

$("#notName").html("").show();

if ((username.length > 3) && (username.length < 20)) {

$("#notName").html("").show();

$.post("check.php", { username: username },
function(result){

if (result == true) {

$("#notName").html("").show();
return true;

}

else {

$("#notName").html("Username is already exists!").show();
return false;

}

});

}

else {

$("#notName").html("Username must be between 3 and 20 characters!").show();
return false;

}

}

else {

$("#notName").html("Username can contain just A-Z, 0-9, dot and underscore!").show();
return false;

}

}

//--------------------------------------------------// checkUsername Function

function checkEmail() {

var email = document.getElementById("rmail").value;

$.post("check.php", { vmail: email },
function(result){

if (result == true){

$.post("check.php", { email: email },
function(result){

if (result == true) {

$("#notMail").html("").show();
return true;

}

else {

$("#notMail").html("Email is already exists!").show();
return false;

}


});

}

else {

$("#notMail").html("Please enter a valid Email").show();
return false;

}


});



}

//--------------------------------------------------// checkEmail Function

function checkPass() {

var passOne = document.getElementById("passone").value;
var passTwo = document.getElementById("passtwo").value;

if (passOne == passTwo) {

$("#notPass").html("").show();
return true;

}

else {

$("#notPass").html("Passwords do not match!").show();
return false;

}

}

//--------------------------------------------------// checkPass Function

function button(a,b,c) {

if (a == true && b == true && c == true) {

document.getElementById("button").style.display = "block";

}

else {

document.getElementById("button").style.display = "none";

}

}

Answer

The main problem is that you didn't understand correctly how to use asynchronous function. You are using asynchronous functions as synchronous. This question can be of help to you.

jQuery Ajax POST example with PHP

Yet, just to try to keep you going and learn step-by-step, if you say that the only thing that isn't working is button function, it's possible that your code can work. Try using global variables instead of local, like this:

    $("#rname").keyup(function() {

        uname = checkUsername(); // var removed

    });     // Username keyup

//--------------------------------------------------//  Username Checking

    $("#rmail").keyup(function() {

        umail = checkEmail();

    });     // Email keyup // var removed

//--------------------------------------------------//  Email Checking

    $("#passone, #passtwo").keyup(function() {

        upass = checkPass(); // var removed

    });     // Email keyup

so that the variables can be read from all functions in the call to button()

Comments