Member_2_5230414
asked on
Javascript/Ajax not working
Hi - The below code should check if a username exists and display yes or no. it should also run a password strength generator.
But the javascript does not seem to run?!?! any ideas why?
Register.php
Available.php
Password_strength.js
and here is my site with the code running
http://runningprofiles.com/login/register.php#
But the javascript does not seem to run?!?! any ideas why?
Register.php
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="http://www.infotuts.com/demo/username-checker-password-indicator/css/style.css" />
</head>
<body>
<div id="container">
<div id="top"> Live Username Availability Checker and Password Strength Indicator Using Ajax, jQuery- InfoTuts </div>
<div id="wrapper">
<div id="form">
<label>Choose Your Username</label>
<input type="text" autocomplete="off" name="user_name" id="user_id" >
<span ></span> <br/><br/>
<label>Choose Your Password</label>
<input type="password" autocomplete="off" name="passwd" />
<span class=""></span>
</div>
</div>
</div>
<!-- javascript placed at bottom to make page load faster -->
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="password_strength.js"></script>
<script type="text/javascript">
$(function()
{
$('.user_name').keyup(function()
{
var checkname=$(this).val();
var availname=remove_whitespaces(checkname);
if(availname!=''){
$('.check').show();
$('.check').fadeIn(400).html('<img src="http://bellacaledonia.files.wordpress.com/2012/05/yes.jpg?w=300&h=300" /> ');</p>
<p style="text-align: justify;">var String = 'username='+ availname;
$.ajax({
type: "POST",
url: "available.php",
data: String,
cache: false,
success: function(result){
var result=remove_whitespaces(result);
if(result==''){
$('.check').html('<img src="http://www.clker.com/cliparts/8/4/c/b/133627367713240779222000px-prohibition_sign.svg-md.png" /> This Username Is Avaliable');
$(".check").removeClass("red");
$('.check').addClass("green");
$(".user_name").removeClass("yellow");
$(".user_name").addClass("white");
}else{
$('.check').html('<img src="http://www.clker.com/cliparts/8/4/c/b/133627367713240779222000px-prohibition_sign.svg-md.png" /> This Username Is Already Taken');
$(".check").removeClass("green");
$('.check').addClass("red")
$(".user_name").removeClass("white");
$(".user_name").addClass("yellow");
}
}
});
}else{
$('.check').html('');
}
});
$('.passwd').password_strength(); // to check password strength
});
function remove_whitespaces(str){
var str=str.replace(/^\s+|\s+$/,'');
return str;
}
</script>
</body>
</html> Available.php
<?php
$mysql_db_hostname = "localhost";
$mysql_db_user = "";
$mysql_db_password = "";
$mysql_db_database ="";
$con = mysql_connect($mysql_db_hostname, $mysql_db_user, $mysql_db_password) or die("Could not connect database");
mysql_select_db($mysql_db_database, $con) or die("Could not select database");
if(isset($_POST['username']) && !empty($_POST['username'])){
$username=strtolower(mysql_real_escape_string($_POST['username']));
$query="select * from members where LOWER(username)='$username'";
$res=mysql_query($query);
$count=mysql_num_rows($res);
$HTML='';
if($count > 0){
$HTML='user exists';
}else{
$HTML='';
}
echo $HTML;
}
?> Password_strength.js
/*
* Password Strength (0.1.2)
* by Sagie Maoz (n0nick.net)
* n0nick@php.net
*
* This plugin will check the value of a password field and evaluate the
* strength of the typed password. This is done by checking for
* the diversity of character types: numbers, lowercase and uppercase
* letters and special characters.
*
* Copyright (c) 2010 Sagie Maoz <n0nick@php.net>
* Licensed under the GPL license, see http://www.gnu.org/licenses/gpl-3.0.html
*
*
* NOTE: This script requires jQuery to work. Download jQuery at www.jquery.com
*
*/
(function($){
var passwordStrength = new function()
{
this.countRegexp = function(val, rex)
{
var match = val.match(rex);
return match ? match.length : 0;
};
this.getStrength = function(val, minLength)
{
var len = val.length;
// too short =(
if (len < minLength)
{
return 0;
}
var nums = this.countRegexp(val, /\d/g),
lowers = this.countRegexp(val, /[a-z]/g),
uppers = this.countRegexp(val, /[A-Z]/g),
specials = len - nums - lowers - uppers;
// just one type of characters =(
if (nums == len || lowers == len || uppers == len || specials == len)
{
return 1;
}
var strength = 0;
if (nums) { strength+= 2; }
if (lowers) { strength+= uppers? 4 : 3; }
if (uppers) { strength+= lowers? 4 : 3; }
if (specials) { strength+= 5; }
if (len > 10) { strength+= 1; }
return strength;
};
this.getStrengthLevel = function(val, minLength)
{
var strength = this.getStrength(val, minLength);
val = 1;
if (strength <= 0) {
val = 1;
} else if (strength > 0 && strength <= 4) {
val = 2;
} else if (strength > 4 && strength <= 8) {
val = 3;
} else if (strength > 8 && strength <= 12) {
val = 4;
} else if (strength > 12) {
val = 5;
}
return val;
};
};
$.fn.password_strength = function(options)
{
var settings = $.extend({
'container' : null,
'bar': null, // thanks codemonkeyking
'minLength' : 6,
'texts' : {
1 : 'Too weak',
2 : 'Weak password',
3 : 'Normal strength',
4 : 'Strong password',
5 : 'Very strong password'
},
'onCheck': null
}, options);
return this.each(function()
{
var container = null, $bar = null;
if (settings.container)
{
container = $(settings.container);
}
else
{
container = $('<span/>').attr('class', 'password_strength');
$(this).after(container);
}
if (settings.bar)
{
$bar = $(settings.bar);
}
$(this).bind('keyup.password_strength', function()
{
var val = $(this).val(),
level = passwordStrength.getStrengthLevel(val, settings.minLength);
if (val.length > 0)
{
var _class = 'password_strength_' + level,
_barClass = 'password_bar_' + level;
if (!container.hasClass(_class) && level in settings.texts)
{
container.text(settings.texts[level]).attr('class', 'password_strength ' + _class);
}
if ($bar && !$bar.hasClass(_barClass))
{
$bar.attr('class', 'password_bar ' + _barClass);
}
}
else
{
container.text('').attr('class', 'password_strength');
if ($bar) {
$bar.attr('class', 'password_bar');
}
}
if (settings.onCheck) {
settings.onCheck.call(this, level);
}
});
if ($(this).val() != '') { // thanks Jason Judge
$(this).trigger('keyup.password_strength');
}
});
};
})(jQuery);and here is my site with the code running
http://runningprofiles.com/login/register.php#
ASKER
what should it look like??
Shouldn't look like anything - it shouldn't be there, you have HTML mixed in with your jQuery
Remove this
</p>
<p style="text-align: justify;">var String = 'username='+ availname;
Remove this
</p>
<p style="text-align: justify;">var String = 'username='+ availname;
ASKER
update but still does nothing :S
You are referencing by class
$('.user_name')
The inputs don't have a class, change your input like so
<input type="text" autocomplete="off" name="user_name" id="user_id" class="user_id">
$('.user_name')
The inputs don't have a class, change your input like so
<input type="text" autocomplete="off" name="user_name" id="user_id" class="user_id">
ASKER
<input type="text" autocomplete="off" name="user_name" id="user_id" class="user_id" >
i did the above but the code does nothing - i type into the textbox and nothing at all :S
i did the above but the code does nothing - i type into the textbox and nothing at all :S
Sorry it's user_name not user_id
<input type="text" autocomplete="off" name="user_name" id="user_id" class="user_name" >
<input type="text" autocomplete="off" name="user_name" id="user_id" class="user_name" >
Here's the basic "hello world" of jQuery/AJAX.
https://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/A_10712-The-Hello-World-Exercise-with-jQuery-and-PHP.html
If you want to learn how to debug JavaScript, you'll probably find a lot of value in Chrome DevTools.
https://developer.chrome.com/devtools/index
http://discover-devtools.codeschool.com/
https://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/A_10712-The-Hello-World-Exercise-with-jQuery-and-PHP.html
If you want to learn how to debug JavaScript, you'll probably find a lot of value in Chrome DevTools.
https://developer.chrome.com/devtools/index
http://discover-devtools.codeschool.com/
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks for your help Gary - i have it up and working now
$('.check').show();
$('.check').fadeIn(400).ht
<p style="text-align: justify;">var String = 'username='+ availname;
$.ajax({
type: "POST",
url: "available.php",