CODEWITHSUNDEEP
jqueryajax
Maudise
Maudise

Reputation: 131

Jquery Ajax username validation not working

I've looked at multiple threads here to try and solve my conundrum but I can't fathom it. For starters; I've tried to crib and amend http://phpseason.wordpress.com/2013/02/17/live-username-availability-checking-using-ajax-and-jquery/ , I have js1.7.1 saved in ../js/jquery-1.7.1.min.js, my ajax_check_login is stored in ../customers/ as is the account_creation.

What I'm trying to get it to do is validate if the username is available live on the page. Note: when I click my submit button it takes me to ../customers/ajax_check_login.php and it displays 1 or 0 correctly.

I've also commented out various bits in my debugging attempts.

I have the following code for my main account creation page;

  <?php
session_start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Account Creation</title>
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
      <!-- <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script> -->

       <script type="text/javascript" src="../js/jquery-1.7.1.min.js">

         $(document).ready(function(){
            $("#wantedusername").change(function(){
/*                 $("#message").html("<img src='ajax-loader.gif' /> checking...");*/
                              $("#message").html("checking...");

            var wantedusername=$("#wantedusername").val();

              $.ajax({
                    type:"POST",
                    url:"../customers/ajax_check_login.php",
                    data:"wantedusername="+wantedusername,
                        success:function(data){
                        if(data==0){
                          /*  $("#message").html("<img src='tick.png' /> Username available");*/
                           $("#message").html(" Username available");
                        }
                        else{
                            /* $("#message").html("<img src='cross.png' /> Username already taken"); */
                            $("#message").html("Username already taken");
                        }
                    }
                 });

            });

         });

       </script>
<?php include "../header.php" ; ?></head>

<body>

<header class="headerbg">




 <section class="headertop">
 <?php include '../nav.php'?>
</section>

</header><!--header and menu wrapper end--> 
<align ="center">
Thank you for showing interest in registering for a Crosstrend Analysis ltd account.  Please note that these require administrator authorisation before the account will become active, this can take up to 72 hours.

VERSION CONTROL 1.3

<div align="center">
<table width="300" border="0" align="Center" cellpadding="0" cellspacing="1" bgcolor="="#cccccc">
<tr>
<form id="acctcreation" name="acctcreation" method="post" action="../customers/ajax_check_login.php">
<td>
<table width = "100%" border ="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td colspan="3"><p><Strong> New Account Request </strong></p></td>
</tr>
<tr>
<td width = "78">Username</td>
<td widith = "6">:</td>
<td width = "294"><input name="wantedusername" type="text" id="wantedusername"></td>
<td id="message"></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input name="wantedpassword" type="password" id="wantedpassword"></td>
</tr>
<tr>
<td>Password Verification</td>
<td> : </td>
<td><input name ="verificationpassword" type="password" id ="verificationpassword"></td>
</tr>
<tr>
<td>Email address</td>
<td>:</td>
<td><input name="emailaddress" type="text" id="emailaddress"></td>
</tr>
<tr>
<td>Company</td>
<td>:</td>
<td><input name="company" type="text" id="company"></td>
</tr>

<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><input type="submit" name="Submit" value="Submit for authentication">   </td>
</tr>
</table>
</td>
</form>
</tr>
</table>

</div>

And my ajax_check_login.php is 

    <?php
include "../connect.php";

/* print "<script type=\"text/javascript\">";
print "alert('I have been called')";
print "</script>";  */


if(isset($_POST['wantedusername'])){
    $wantedusername = mysqli_real_escape_string($mysqli, $_POST['wantedusername']);

$usernamecheckstring = "SELECT 1 FROM table WHERE username='".$wantedusername."'";

$usernamecheckquery = mysqli_query($mysqli, $usernamecheckstring);

$rows =mysqli_num_rows($usernamecheckquery);
echo $rows;
}
?>

Any help would be appreciated as always.

Regards Maudise

Upvotes: 0

Views: 433

Answers (3)

ia.solano
ia.solano

Reputation: 558

I think you might not be passing the data correctly, try

url:"../customers/ajax_check_login.php?wantedusername="+wantedusername,
success:function(data){...

Upvotes: 1

Tieson T.
Tieson T.

Reputation: 21191

You need to remove the src="../js/jquery-1.7.1.min.js" from the script tag that contains your JavaScript code - the src attribute is only valid when referencing an external file. In case you're wondering, here's the explanation from the W3C (emphasis mine):

The script may be defined within the contents of the SCRIPT element or in an external file. If the src attribute is not set, user agents must interpret the contents of the element as the script. If the src has a URI value, user agents must ignore the element's contents and retrieve the script via the URI.

Reference: http://www.w3.org/TR/html401/interact/scripts.html

Upvotes: 1

Rob Adams
Rob Adams

Reputation: 450

The second script tag should read 

<script type="text/javascript">

not 

<script type="text/javascript" src="../js/jquery-1.7.1.min.js">

Upvotes: 1

Related Questions