Member Avatar for AJLX

Hello guys,

Hopefully a nice easy one for you. I currently have a form field that I would like to turn green when the correct entry has been entered and red when an incorrect entry has been returned. I'm very close to a solution (I think!) But I just need a hand finishing it off.

Here is my code so far:

<HTML>
 <HEAD>
  <TITLE>Please Register</TITLE>
 
  <META name="Author" Content="Andy Jones">
  <META name="Keywords" Content="">
  <META name="Description" Content="">
 
 <!--   <script type="text/javascript" src="js/mootools-1.2.1-core-yc.js"></script> -->
 <!-- <script type="text/javascript" src="js/register.js"></script> -->
 <script type="text/javascript">
function showHint(str)
{
if (str.length==0)
  {
  document.getElementById("txtHint").innerHTML="";
 return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
	  document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    if(txtHint = 'Yes') {
    	alert("This is an alert");
    }
    }
  }
xmlhttp.open("GET","do_register.php?q="+str,true);
xmlhttp.send();
}
 
</script>
 
  <link rel="stylesheet" type="text/css" href="register.css" />
</HEAD>
 
 <BODY>
 
<center>
 
<div id="status">
 
<fieldset><legend align="center">Registration</legend>
 
<div id="register_response"><!-- spanner --></div>
 
<form id="register" name="register" method="post" action="do_register.php">
<table align="center" width="600" border="0">
<tr>
<td width="80">First Name</td><td><input type="text" onkeyup="showHint(this.value)"><div id="correct_firstname">Ok!</div> <div id="error_firstname"> Letters only!</div></td>
<tr>
<tr>
<td> </td>
<td><input id="submit" type="submit" name="submit" value="Register">
<div id="ajax_loading"><img align="absmiddle" src="images/spinner.gif"> Processing...</div></td>
</tr>
</table>
</form>
<span id="txtHint"></span></p> 
</fieldset>
<a href="index.php">Home</a>

I have a variable called $response which returns either YES or NO. If YES I would like the DIV 'correct_firstname' to be visible,if No then the DIV 'error_firstname' would be visible.

I currently had an alert in there just for error checking. Would this code work in it's place?

document.getElementById('correct_firstname').style.visibility = 'visible';

Regards,

AJLX

  • 2 Contributors
  • 1 Reply
  • 318 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by Airshow
Member Avatar for Airshow

AJLX,

The code becomes a bit simpler if you pass in a reference to the input element (form field) itself rather than its value (str).

//replace
function showHint(str){
  ...
}
//with
function showHint(inputElement){
  var str = inputElement.value;
  ...
}

Now you still have easy access to the field's value but don't have to rediscover the input element with document.getElementById. For example:

...
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4)
    {
      var response = xmlhttp.responseText.toUpperCase();
	  if (xmlhttp.status !== 200)
	  {
	  	 response = 'NO';//simulate 'NO' on AJAX response error
	  }
      inputElement.style.color = (response === 'YES') ? '#00CC00' : '#CC0000'; //green/red
      document.getElementById('correct_firstname').style.display = (response === 'YES') ? 'block' : 'none';
      document.getElementById('error_firstname').style.display   = (response === 'YES') ? 'none' : 'block';
    }
  }
  ...

Airshow

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.