Start New Discussion within our Web Development Community

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:

  <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)
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    if(txtHint = 'Yes') {
    	alert("This is an alert");
  <link rel="stylesheet" type="text/css" href="register.css" />
<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">
<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>
<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>
<span id="txtHint"></span></p> 
<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';




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

function showHint(str){
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:

    if (xmlhttp.readyState==4)
      var response = xmlhttp.responseText.toUpperCase();
	  if (xmlhttp.status !== 200)
	  	 response = 'NO';//simulate 'NO' on AJAX response error
	  } = (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';


This article has been dead for over six months. Start a new discussion instead.