how to keep submit button disable in ajax username availablity validation

please refer this link
http://www.bitrepository.com/a-simple-ajax-username-availability-checker.html 
okay i have this script.. and its working fine..
i have 2 problems in it...
how do i check 2 variable, lets say i want to check username with matching email
i can pass username how do i post email part in check.php

next, for security reason...
how to disable submit button, when username box is kept empty or if availablity exists....
right now if visitor click submit without inputing anything it gives blank entry in database....

i want to sort out things ...
help need...
LVL 1
global_expert_adviceAsked:
Who is Participating?
 
global_expert_adviceConnect With a Mentor Author Commented:
Whoops... things solved by me...
i made the following changes...
first i added
var countryid = $("#countryid").val();
very imp. to make extra data post to work

next..

correct format of multi data is
    data: "state="+ usr +"&countryid="+ countryid,

Next, i corrected the countryid input id from state to country so as to make var countryid work...
by doing this  i got succes..

I also got help from the below url
http://bytes.com/topic/javascript/answers/847762-ajax-jquery-multiple-data-parameters
0
 
InsoftserviceCommented:
hi,

1> As its done for username u can even do the same for email but in query u have to use and clause which will tell u that whether same username and email are used or not ie.
if username array('abc','123','456') and its email array('a@y.com','b@u.com',c@d.com') are existed user.

and if client enters ('abc' , 'a@y.com') it will fail and give me msg tht it already exist.

and if client enters ('abc' , 'b@u.com') it will allow to enter.
Use single ' quotes

2> Use alert when its validation fails it will not allow to submit

0
 
global_expert_adviceAuthor Commented:
okay that i know...
you are talking about the txt file datase..

i m putting the code of index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>An AJAX Username Verification Tool</TITLE>
  <META NAME="Keywords" CONTENT="form, username, checker">
  <META NAME="Description" CONTENT="An AJAX Username Verification Script">

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

<link rel="stylesheet" type="text/css" href="style.css" />

<SCRIPT type="text/javascript">
<!--
/*
Credits: Bit Repository
Source: http://www.bitrepository.com/web-programming/ajax/username-checker.html 
*/

pic1 = new Image(16, 16);
pic1.src = "loader.gif";

$(document).ready(function(){

$("#username").change(function() {

var usr = $("#username").val();

if(usr.length >= 4)
{
$("#status").html('<img src="loader.gif" align="absmiddle">&nbsp;Checking availability...');

    $.ajax({  
    type: "POST",  
    url: "check.php",  
    data: "username="+ usr,  
    success: function(msg){  
   
   $("#status").ajaxComplete(function(event, request, settings){

      if(msg == 'OK')
      {
        $("#username").removeClass('object_error'); // if necessary
            $("#username").addClass("object_ok");
            $(this).html('&nbsp;<img src="tick.gif" align="absmiddle">');
      }  
      else  
      {  
            $("#username").removeClass('object_ok'); // if necessary
            $("#username").addClass("object_error");
            $(this).html(msg);
      }  
   
   });

 }
   
  });

}
else
      {
      $("#status").html('<font color="red">The username should have at least <strong>4</strong> characters.</font>');
      $("#username").removeClass('object_ok'); // if necessary
      $("#username").addClass("object_error");
      }

});

});

//-->
</SCRIPT>

</HEAD>

 <BODY>
 <center>

<div align="center">

<h2 align="center">AJAX Username Verification</h2>

<center>NOTE: Please type an username and continue filling the other fields. You'll see the validator in action.<br /><br />

Already existing members in this demo: <STRONG>john, michael, terry, steve, donald</STRONG></center><br /><br />

<form>
  <table width="700" border="0">  
    <tr>
      <td width="200"><div align="right">Username:&nbsp;</div></td>
      <td width="100"><input id="username" size="20" type="text" name="username"></td>
      <td width="400" align="left"><div id="status"></div></td>
    </tr>

      <tr>
      <td width="200"><div align="right">Password:&nbsp;</div></td>
      <td width="100"><input size="20" type="text" name="password"></td>
      <td width="400" align="left"><div id="status"></div></td>
    </tr>

      <tr>
      <td width="200"><div align="right">Confirm Password:&nbsp;</div></td>
      <td width="100"><input size="20" type="text" name="confirm_password"></td>
      <td width="400" align="left"><div id="status"></div></td>
    </tr>
  </table>
</form>

</div>
 </center>
 
 </BODY>
</HTML>


code for check.php
<?php
if(isSet($_POST['username']))
{
$username = $_POST['username'];

$dbHost = 'xxxxxxxxxx'; // usually localhost
$dbUsername = 'xxxxxxxxxxxxx';
$dbPassword = 'xxxxxxxxxxxx';
$dbDatabase = 'xxxxxxxxxxx';

$db = mysql_connect($dbHost, $dbUsername, $dbPassword) or die ("Unable to connect to Database Server.");
mysql_select_db ($dbDatabase, $db) or die ("Could not select database.");

$sql_check = mysql_query("select * from register where ConfirmEmail='".$username."'") or die(mysql_error());

if(mysql_num_rows($sql_check))
{
echo '<font color="red">The nickname <STRONG>'.$username.'</STRONG> is already in use.</font>';
}
else
{
echo 'OK';
}

}

?>

jquery.js file attached...

now please refer to what i'm asking....
with example and code plz...
i'm not an expert in javascript... so don't  throw short ideas...
thanks
jquery.js
0
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
global_expert_adviceAuthor Commented:
Submit disable option is done by me...
how...
code of input button i made like this <input name="submit" type="submit" value="Add State" id="btnSubmit" disabled style="color: #FFFFFF; font-family: arial; font-size: 12pt; float: center; border: 2px solid #FE7412; padding: 0; background-color: #FF6600">

next made a small change in index.php

...
$("#status").ajaxComplete(function(event, request, settings){

      if(msg == 'OK')
      {
        $("#state").removeClass('object_error'); // if necessary
            $("#state").addClass("object_ok");
            $(this).html('&nbsp;<img src="tick.gif" align="absmiddle">');
            document.getElementById('btnSubmit').disabled =false;
      }  
      else  
      {  
            $("#state").removeClass('object_ok'); // if necessary
            $("#state").addClass("object_error");
            $(this).html(msg);
            document.getElementById('btnSubmit').disabled =true;
...
0
 
global_expert_adviceAuthor Commented:
now one query is left...
that is in my case as i'm adding states
so when i input the state name, it checks whether its available or not based on sql query like
select * from state where statename="$username"
but as i would like to do validation based on state name w.r.t to country so i want to check the state name w.r.t to countryid associated with it...
select * from state where statename="$username" AND countryid="$countryid"
as i get username by post method...
i'm stuck how to get country id to check.php page... to do query
confused here..

if(isSet($_POST['state'])) // here how to get post for country too ///
{
$state = $_POST['state'];
$countryid = $_POST['countryid'];

ALSO in index.php the java script passes post for username(mycase state), how to make it send for countryid too that is in input hidden form...
i think something has to be changed here in index.php
$.ajax({  
    type: "POST",  
    url: "check_state.php?countryid=$countryid",  
    data: "state="+ usr,  // this part //
    success: function(msg){

0
 
InsoftserviceCommented:
hi,

im going thru ur code

$.ajax({  
    type: "POST",  
    url: "check_state.php?countryid=$countryid",  
    data: "state="+ usr,  // this part //
    success: function(msg){

change it to

$.ajax({  
    type: "POST",  
  url: "check_state.php",
              data: "state ="+ state +"& countryid ="+ countryid,
 success: function(msg){
0
 
global_expert_adviceAuthor Commented:
thanks
and how to fetch the same in check.php
this part
if(isSet($_POST['state'])) // here how to get post for country too ///
{
$state = $_POST['state'];
0
 
InsoftserviceConnect With a Mentor Commented:
hi,
please specify difference between check_state.php and check.php

in check .php u will get
 $countryid = $_POST['countryid'];
$state = $_POST['state'];

and u can use this in ur query as its done for username

$sql_check = mysql_query("select * from register where state='".$state."' AND countryid = $countryid "  ) or die(mysql_error());

0
 
global_expert_adviceAuthor Commented:
actually its a server side query as you know...  inside index.php you can see the script is doing post to check.php (mycase check_state.php)  and its sending the data ... i tried ur way too... but its not working or giving error...

this is the main... where we have to work on... to post countryid too...
$.ajax({  
    type: "POST",  
    url: "check_state.php?countryid=$countryid",  
    data: "state="+ usr,  // this part //
    success: function(msg){

can u see what does +usr mean...
i tried ur way too putting
data: "state ="+ state +"& countryid ="+ countryid,
but not giving or sending query to check.php...

could u checkout this by putting codes and making sure its working..
0
All Courses

From novice to tech pro — start learning today.