How to check if a username is available

Hi,

after some searches in the forum i found out the code doing the job described in the title but i am still having some questions.
I placed the code in the "Form Html" section of the "Form Code" tab.
After some minor modifications my code inside the above section looks like:

<?php
$script = "window.addEvent('domready', function() {
  $('uname').addEvent('blur', function(e) {
    e = new Event(e).stop();

    // Show the spinning indicator when pressing the submit button...  
    $('indicator1').setStyle('display','block');

    var username = $('uname').value;
    if ( username != '' ) {
      var url = 'index2.php?option=com_chronocontact&chronoformname=ajax_form&username='+username+'&tmpl=component';

      new Ajax(url, {
        method: 'get',
        onSuccess: parseResult
      }).request();
    }
    function parseResult(request)
    {
      $('indicator1').setStyle('display','none');

      var msg = request.split('##@##');
      $('username_msg').setHTML(msg[1]);
    }

  });
  
    $('email').addEvent('blur', function(e) {
    e = new Event(e).stop();

    // Show the spinning indicator when pressing the submit button...  
    $('indicator2').setStyle('display','block');

    var email = $('email').value;
    if ( email != '' ) {
      var url = 'index2.php?option=com_chronocontact&chronoformname=ajax_form&email='+email+'&tmpl=component';

      new Ajax(url, {
        method: 'get',
        onSuccess: parseResult
      }).request();
    }
    function parseResult(request)
    {
      $('indicator2').setStyle('display','none');

      var msg = request.split('##@##');
      $('email_msg').setHTML(msg[1]);
    }

  });
  
});";
$doc =& JFactory::getDocument();
$doc->addScriptDeclaration($script);
?>

<?php
$db =& JFactory::getDBO();
$myurl =& JRequest:: geturi();

foreach ($_GET as $key => $val) {

   if ($key == 'username'){
      // username code
      $text =& JRequest:: getString('username');
      $sql = "
         SELECT COUNT(*)
            FROM jos_users
            WHERE username = ".$db->quote($text).";";
      $db->setQuery( $sql );
      echo "##@##";
      if ( $database->loadResult() != 0 ) {
        echo '<span class="red">Username Already Taken</span>';
      } else {
        echo '<span class="green">This Username is available</span>';
      }
      echo "##@##";
   }
   elseif ($key == 'email'){
      // email code
      $regemail =& JRequest:: getString('email');
      $sql = "
          SELECT COUNT(*)
              FROM jos_users
              WHERE email = ".$db->quote($regemail).";";
      $db->setQuery( $sql );
      echo "##@##";
      if ( $database->loadResult() != 0 ) {
        echo '<span class="red">Email Already Taken</span>';
      } else {
        echo '<span class="green">This email is available</span>';
      }
      echo "##@##";
   }

}
?>

<style type="text/css">.red{color:red;} .green{color:green;}</style>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label">Username:</label>
    <input class="cf_inputbox required" maxlength="150" size="30" title="Υποχρεωτικό" id="uname" name="uname" type="text" />
    <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" src="components/com_chronocontact/css/images/tooltip.png"/></a>
    <div class="tooltipdiv">Username: :: Τhe username</div>
    <span id="indicator1" style="display: none"><img src="/images/spinner2.gif" alt="checking..." /></span>
    <div id='username_msg' ></div>
  </div>
  <div class="clear"> </div>
</div>


<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label">E-mail:</label>
    <input class="cf_inputbox required validate-email" maxlength="150" size="30" title="Υποχρεωτικό" id="email" name="email" type="text" />
    <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" src="components/com_chronocontact/css/images/tooltip.png"/></a>
    <div class="tooltipdiv">E-mail: :: email</div>
    <span id="indicator2" style="display: none"><img src="/images/spinner2.gif" alt="checking..." /></span>
    <div id='email_msg' ></div>
  </div>
  <div class="clear"> </div>
</div>

However, i've noticed that the url never becomes as i desire.
In addition i believe that the db queries are never called.

Please advice

Hi Ioannisi,

I have been working on this as well to some extent. I have not had a chance to get back to it just yet but when I get it figured out I will post here to let you know what I did.

There is a forum post that works with AJAX to check the db dynamically and tell if the username is take before the user hits submit. It's pretty cool.

I will keep you posted..

Paul

Hi,

after some investigations i found out the solution for the problem.
The solution is the following:

Copy the code below in the "Form HTML" section of the "Form Code" tab:

<?php
$db =& JFactory::getDBO();
$myurl =& JRequest:: geturi();

foreach ($_GET as $key => $val) {

   if ($key == 'username'){
      // username code
      $text =& JRequest:: getString('username');
      $sql = "
         SELECT COUNT(*)
            FROM jos_users
            WHERE username = ".$db->quote($text).";";
      $db->setQuery( $sql );
      echo "##@##";
      if ( $database->loadResult() != 0 ) {
        echo '<span class="red">Username Already Taken</span>';
      } else {
        echo '<span class="green">This Username is available</span>';
      }
      echo "##@##";
   }
   elseif ($key == 'email'){
      // email code
      $regemail =& JRequest:: getString('email');
      $sql = "
          SELECT COUNT(*)
              FROM jos_users
              WHERE email = ".$db->quote($regemail).";";
      $db->setQuery( $sql );
      echo "##@##";
      if ( $database->loadResult() != 0 ) {
        echo '<span class="red">Email Already Taken</span>';
      } else {
        echo '<span class="green">This email is available</span>';
      }
      echo "##@##";
   }

}
?>

<style type="text/css">.red{color:red;} .green{color:green;}</style>

...
<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label">Username:</label>
    <input class="cf_inputbox required" maxlength="150" size="30" title="Required" id="uname" name="uname" type="text" onblur="checkUserName(this.value)" />
    <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" src="components/com_chronocontact/css/images/tooltip.png"/></a>
    <div class="tooltipdiv">Username: :: username</div>
    <span id="indicator1" style="display: none"><img src="/images/spinner.gif" alt="checking..." /></span>
    <div id="username_msg" ></div>
  </div>
  <div class="clear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label">Email:</label>
    <input class="cf_inputbox required validate-email" maxlength="150" size="30" title="Required" id="email" name="email" type="text" onblur="checkEmail(this.value)" />
    <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" src="components/com_chronocontact/css/images/tooltip.png"/></a>
    <div class="tooltipdiv">Email: :: email</div>
    <span id="indicator2" style="display: none"><img src="/images/spinner.gif" alt="checking..." /></span>
    <div id="email_msg" ></div>
  </div>
  <div class="clear"> </div>
</div>

Take care the 2 onblur javascript calls inside the input text (username & email)

Also add the following code inside the "Form Javascript" section of the "Form Code" tab

var xmlhttp;

function checkUserName(username)
{
  xmlhttp=GetXmlHttpObject();
  if (xmlhttp==null)
  {
    alert ("Browser does not support HTTP Request");
    return;
  }

  if ( username != '' ) {
     var url = 'index.php?option=com_chronocontact&chronoformname=registration&username='+username+'&tmpl=component';

     xmlhttp.onreadystatechange=stateUserChanged;
     xmlhttp.open("GET",url,true);
     xmlhttp.send(null);
  }
}

function checkEmail(email)
{
  xmlhttp=GetXmlHttpObject();
  if (xmlhttp==null)
  {
    alert ("Browser does not support HTTP Request");
    return;
  }

  if ( email != '' ) {
     var url = 'index.php?option=com_chronocontact&chronoformname=registration&email='+email+'&tmpl=component';

     xmlhttp.onreadystatechange=stateEmailChanged;
     xmlhttp.open("GET",url,true);
     xmlhttp.send(null);
  }
}

function stateUserChanged()
{
  if (xmlhttp.readyState==4)
  {
    var msg = xmlhttp.responseText.split('##@##');
    document.getElementById("username_msg").innerHTML=msg[3];
  }
}

function stateEmailChanged()
{
  if (xmlhttp.readyState==4)
  {
    var msg = xmlhttp.responseText.split('##@##');
    document.getElementById("email_msg").innerHTML=msg[3];
  }
}

function GetXmlHttpObject()
{
  if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
  if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
  return null;
}

Take care that the msg[3] could have different value (1 or 2). It deepends from the object calls

Hi Iommisi,

Ahhh, you beat me to it. 🤣 I am still working on some chronoconnectivity issues I am having.

Thanks so much for posting back though with this,

Paul

Hi Iommisi,

I tried this as you said to take care in the form code in the areas you pointed out but when I go to execute, I get simply 'UNDEFINED' instead of the result I am looking for.

I tried changing the msg[1] to 2 and 3 and still get the same result.

Is there something I am missing here?

Thanks for any help on this,

Paul

Hi,

In the validation tab i have enabled the validation and validation library pointing to the mootools.
In addition, take care that in the above script i gave i am quering from the jos_users table:

...
SELECT COUNT(*)
FROM jos_users
WHERE username = ".$db->quote($text).";";
...

So in case you are storing the logged in users in to other table you should change the query, as well

Hello Ioanni,

I saw what you said on the table and I was saving it to jos_users so I changed it to the table I was saving that information in, jos_chronoforms_contractor_reg, but it still seems to just show me Undefined.

I also tried to change the msg[3] part to the other msg and it did not do it for me.

Any other thoughts on this?

Thanks so much for your help,

Here is the link to the form I am testing it on....

Hi,

I think i found where the problem is.
The problem is coming from the url.
In my case, if you see the javascript function i am setting the url to the following value:
var url = 'index.php?option=com_chronocontact&chronoformname=registration&username='+username+'&tmpl=component';
The registration in the above url is the name of the form

In your case you should change the above value
'index.php?option=com_chronocontact&chronoformname=contractor_reg&username='+username+'&tmpl=component'
I dont know if you will need to add the emrcontractor.com/ in the front of the latter url

So the undefined word was coming because of the url.

ioannisi,

Whooot! It works... thanks so much for your help on this. I have been working on this for like a week now.

Thanks again,

Paul

Hi Hi,

I am pretty sure that I've followed all the above steps, but I still get the "UNDEFINED" message.

This is my code in the FORM HTML

<?php
$db =& JFactory::getDBO();
$myurl =& JRequest:: geturi();

foreach ($_GET as $key => $val) {

   if ($key == 'username'){
      // username code
      $text =& JRequest:: getString('username');
      $sql = "
         SELECT COUNT(*)
            FROM lkmh_users
            WHERE username = ".$db->quote($text).";";
      $db->setQuery( $sql );
      echo "##@##";
      if ( $database->loadResult() != 0 ) {
        echo '<span class="red">Username Already Taken</span>';
      } else {
        echo '<span class="green">This Username is available</span>';
      }
      echo "##@##";
   }
   elseif ($key == 'email'){
      // email code
      $regemail =& JRequest:: getString('email');
      $sql = "
          SELECT COUNT(*)
              FROM lkmh_users
              WHERE email = ".$db->quote($regemail).";";
      $db->setQuery( $sql );
      echo "##@##";
      if ( $database->loadResult() != 0 ) {
        echo '<span class="red">Email Already Taken</span>';
      } else {
        echo '<span class="green">This email is available</span>';
      }
      echo "##@##";
   }

}
?>

<style type="text/css">.red{color:red;} .green{color:green;}</style>

...
<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label">Username:</label>
    <input class="cf_inputbox required" maxlength="150" size="30" title="Required" id="uname" name="uname" type="text" onblur="checkUserName(this.value)" />
    <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" src="components/com_chronocontact/css/images/tooltip.png"/></a>
    <div class="tooltipdiv">Username: :: username</div>
    <span id="indicator1" style="display: none"><img src="/images/spinner.gif" alt="checking..." /></span>
    <div id="username_msg" ></div>
  </div>
  <div class="clear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label">Email:</label>
    <input class="cf_inputbox required validate-email" maxlength="150" size="30" title="Required" id="email" name="email" type="text" onblur="checkEmail(this.value)" />
    <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" src="components/com_chronocontact/css/images/tooltip.png"/></a>
    <div class="tooltipdiv">Email: :: email</div>
    <span id="indicator2" style="display: none"><img src="/images/spinner.gif" alt="checking..." /></span>
    <div id="email_msg" ></div>
  </div>
  <div class="clear"> </div>
</div>

In FORM JavaScript:

var xmlhttp;

function checkUserName(username)
{
  xmlhttp=GetXmlHttpObject();
  if (xmlhttp==null)
  {
    alert ("Browser does not support HTTP Request");
    return;
  }

  if ( username != '' ) {
     var url = 'index.php?option=com_chronocontact&chronoformname=register='+username+'&tmpl=component';

     xmlhttp.onreadystatechange=stateUserChanged;
     xmlhttp.open("GET",url,true);
     xmlhttp.send(null);
  }
}

function checkEmail(email)
{
  xmlhttp=GetXmlHttpObject();
  if (xmlhttp==null)
  {
    alert ("Browser does not support HTTP Request");
    return;
  }

  if ( email != '' ) {
     var url = 'index.php?option=com_chronocontact&chronoformname=register='+email+'&tmpl=component';

     xmlhttp.onreadystatechange=stateEmailChanged;
     xmlhttp.open("GET",url,true);
     xmlhttp.send(null);
  }
}

function stateUserChanged()
{
  if (xmlhttp.readyState==4)
  {
    var msg = xmlhttp.responseText.split('##@##');
    document.getElementById("username_msg").innerHTML=msg[3];
  }
}

function stateEmailChanged()
{
  if (xmlhttp.readyState==4)
  {
    var msg = xmlhttp.responseText.split('##@##');
    document.getElementById("email_msg").innerHTML=msg[3];
  }
}

function GetXmlHttpObject()
{
  if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
  if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
  return null;
}

I've set the Validation to YES.

I am running latest Joomla 1.5.12 and latest Chronoform V3.1_RC5.2

this is the link to the form:
http://www.cookingspace.com.au/index.php?option=com_chronocontact&chronoformname=register

Can someone please tell me what i've missed???

Thanks in advance.

Darwin

Hi Darwin,

Not sure if this helps but, I noticed you are using the table "FROM lkmh_users" and what did it for me was changing mine to "jos_users".

There are 2 instances of this so see if that changes it for you too..


Paul

Hi Paul,

All of my tables in the database use "lkmh" as the prefix instead of "jos". I dunno why.

I've tried "jos_users" anyway, but with no success.

This really frustrate me, as for some reason the code does not work for me.

Anymore suggestion of what might be the problem?

Darwin

hrmm, I am not sure why your installation has that prefix. I am not really sure what is going on there as I only had two spots that were the problem for me

one was the URL at the end not matching the form name I was using and the table name it was checking and it seemed to work for me.

Sorry I don't have any other experience.

Paul

Thanks Paul, I appreciate your time for trying to help me...

Might have to give this one a pass...😢

Oh Paul, nice website that you've got there.

Hi both,

Use the #_ prefix for the database tables and Joomla will automatically replace it with the local prefix. So `#__users` not `jos_users` or `lkmh_users`. Note that's two underscores.

Bob

Ahh,

Good point Bob... it seemed to work for me with just jos_users thought. Maybe that will help isenk out with his issue.

Hi Paul,

Yes, if your prefix is set to the standard jos_ it will work fine - but it breaks when someone else tries to use the same code with a non-standard prefix (which is why we try to use the #__users version in the forums here).

Bob

Hi Bob,

changing the prefix to "#_" didn't solve the problem.

So I suspect the problem might be in:

1. The database connection -
(How do we check whether the database script part actually work & retrieving the right data from the right table?)

2. The JavaScript.

Is there any other different example script that I can try to achieve this?

Thanks,
Darwin

Hi isenk,

#1- Please show me the first few lines of your code and I will tell you if the query is right or wrong or if we can change it!

#2- the javascript is using the generic pure JS code, not the mootools code which would save some lines, both are fine but more lines of code may get more problems, lets fix #1 and I will see if I can provide the JS code in the mootools version!

Regards,
Max

Hi Max,

These are all the codes for the test form which is called "register".

In the FORM HTML code:

<?php
$db =& JFactory::getDBO();
$myurl =& JRequest:: geturi();
print_r ($myurl);
foreach ($_GET as $key => $val) {

   if ($key == 'username'){
      // username code
      $text =& JRequest:: getString('username');
      print_r ($text);
      $sql = "
         SELECT COUNT(*)
            FROM #__users
            WHERE username = ".$db->quote($text).";";
      $db->setQuery($sql);
      echo "##@##";
      if ($database->loadResult()!=0) {
        echo '<span class="red">Username Already Taken</span>';
      } else {
        echo '<span class="green">This Username is available</span>';
      }
      echo "##@##";
   }
   elseif ($key == 'email'){
      // email code
      $regemail =& JRequest:: getString('email');
      $sql = "
          SELECT COUNT(*)
              FROM #__users
              WHERE email = ".$db->quote($regemail).";";
      $db->setQuery( $sql );
      echo "##@##";
      if ( $database->loadResult() != 0 ) {
        echo '<span class="red">Email Already Taken</span>';
      } else {
        echo '<span class="green">This email is available</span>';
      }
      echo "##@##";
   }

}

?>

<style type="text/css">.red{color:red;} .green{color:green;}</style>

...
<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label">Username:</label>
    <input class="cf_inputbox required" maxlength="150" size="30" title="Required" id="uname" name="uname" type="text" onblur="checkUserName(this.value)" />
    <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" src="components/com_chronocontact/css/images/tooltip.png"/></a>
    <div class="tooltipdiv">Username: :: username</div>
    <span id="indicator1" style="display: none"><img src="/images/spinner.gif" alt="checking..." /></span>
    <div id="username_msg" ></div>
  </div>
  <div class="clear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label">Email:</label>
    <input class="cf_inputbox required validate-email" maxlength="150" size="30" title="Required" id="email" name="email" type="text" onblur="checkEmail(this.value)" />
    <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" src="components/com_chronocontact/css/images/tooltip.png"/></a>
    <div class="tooltipdiv">Email: :: email</div>
    <span id="indicator2" style="display: none"><img src="/images/spinner.gif" alt="checking..." /></span>
    <div id="email_msg" ></div>
  </div>
  <div class="clear"> </div>
</div>

And in the Form JavaScript code:

 var xmlhttp;

function checkUserName(username)
{
  xmlhttp=GetXmlHttpObject();
  if (xmlhttp==null)
  {
    alert ("Browser does not support HTTP Request");
    return;
  }

  if ( username != '' ) {
     var url = 'index.php?option=com_chronocontact&chronoformname=register='+username+'&tmpl=component';

     xmlhttp.onreadystatechange=stateUserChanged;
     xmlhttp.open("GET",url,true);
     xmlhttp.send(null);
  }
}

function checkEmail(email)
{
  xmlhttp=GetXmlHttpObject();
  if (xmlhttp==null)
  {
    alert ("Browser does not support HTTP Request");
    return;
  }

  if ( email != '' ) {
     var url = 'index.php?option=com_chronocontact&chronoformname=register='+email+'&tmpl=component';

     xmlhttp.onreadystatechange=stateEmailChanged;
     xmlhttp.open("GET",url,true);
     xmlhttp.send(null);
  }
}

function stateUserChanged()
{
  if (xmlhttp.readyState==4)
  {
    var msg = xmlhttp.responseText.split('##@##');
    document.getElementById("username_msg").innerHTML=msg[3];
  }
}

function stateEmailChanged()
{
  if (xmlhttp.readyState==4)
  {
    var msg = xmlhttp.responseText.split('##@##');
    document.getElementById("email_msg").innerHTML=msg[3];
  }
}

function GetXmlHttpObject()
{
  if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
  if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
  return null;
}

I also have updated to the latest chronoform 5.3, which I thought might fix the problem😟

Thank you in advance for your help Max.

Regards,
Darwin

Hi Darwin,

I see there is a mistake a the code!

replace any occurrence of $database with $db since we have only $db defined at the top! I suggest you add this line too after the <?php :

global $mainframe;

Regards,
Max

Hi Max,

I've done your previous suggestions and still with no success😟.

Really frustrating, especially when others manage to get this work.

I really appreciate your guys help so far.

Max, if it's not to much trouble, I can PM you a Super Admin access, in case you are a curious as I am to find out the solution🙂.

Let me know please.

Regards,
Darwin

Hi Darwin, ok, please email me admin login!

Regards,
Max

I was wondering if there is away to modify this to not only check the username, but also to suggest available username based on what was entered in the username field. That would really be great!

FYI I am using this code on one of my sites right now. Thanks for the work put in.

Hi okanime,

I'm sure that it's possible but it needs someone to think what the code should be !!

Bob