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
 <!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> 

Open in new window


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;
}
?> 

Open in new window


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);

Open in new window


and here is my site with the code running

http://runningprofiles.com/login/register.php#
runnerjp2005Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
Notice the bolded syntax error

$('.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",
0
runnerjp2005Author Commented:
what should it look like??
0
GaryCommented:
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;
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

runnerjp2005Author Commented:
update but still does nothing :S
0
GaryCommented:
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">
0
runnerjp2005Author Commented:
<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
0
GaryCommented:
Sorry it's user_name not user_id

<input type="text" autocomplete="off" name="user_name" id="user_id" class="user_name" >
0
Ray PaseurCommented:
Here's the basic "hello world" of jQuery/AJAX.
http://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/
0
GaryCommented:
Replace
data: String,

with the following, changing username to whatever available.php is expecting to be posted
data: "username="+availname,

Your php script is returning
Could not connect database
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
runnerjp2005Author Commented:
Thanks for your help Gary - i have it up and working now
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
AJAX

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.