• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 260
  • Last Modified:

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#
0
runnerjp2005
Asked:
runnerjp2005
  • 5
  • 4
1 Solution
 
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
runnerjp2005Author Commented:
Thanks for your help Gary - i have it up and working now
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now