Ajax or JavaScript: Changing Style According to Server Response

Question

Hey, I'd like to change the font color or the responseText based on the result. For example, if the responseText is NOT FOUND, I'd like to font color to be red. Otherwise, it will be black. It's currently displaying the correct responseText; I just want to change the color when necessary. Here is my current Ajax:

  function newXMLHttpRequest() 
  {
     var xmlreq = false;
     if (window.XMLHttpRequest) 
     {
        xmlreq = new XMLHttpRequest();
     } 
        else if (window.ActiveXObject) 
     {
        try 
        {
           xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
        }
           catch (e2) 
           {
              alert("Error: Unable to create an XMLHttpRequest.");
           }
      }
        return xmlreq;
  }
  function getLocation(location) 
  {
     var getLocation= newXMLHttpRequest(); // sending request
     getLocation.open("GET", "/PP?PAGE=GETLOCATIONNAME&ROUTINGNUM=" + location, false);
     getLocation.send(null); // getting location
     document.getElementById("location_div").innerHTML = getLocation.responseText;
  }

The responseText will be within a table in the HTML:

                    <tr>
                        <td class="ajax_msg">
                            <div id="location_div"></div>                           
                        </td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td>
                            <div class="column1">
                                <p class="label_top">
*Routing Number</p>
                                <p class="field_top"><input type="text" id="location" name="location" size="28" maxlength="9"   onblur="getLocation(this.value);" /></p> 

Any suggestions are welcome. Thanks in advance!

Answer 1

Modify your code like this:

  function getLocation(location) 
  {
     var getLocation= newXMLHttpRequest(); // sending request
     getLocation.open("GET", "/PP?PAGE=GETLOCATIONNAME&ROUTINGNUM=" + location, false);
     getLocation.send(null); // getting location

     var dv = document.getElementById("location_div");

     if (getLocation.responseText === 'NOT FOUND'){
       dv.style.color = "red";
     }

     dv.innerHTML = getLocation.responseText;
  }

You basically check the response text in condition with:

if (getLocation.responseText === 'NOT FOUND'){

And change its color using style like this:

dv.style.color = "red";

Note that dv variable represents the div where you will be showing the respones text which was set earlier with this line:

var dv = document.getElementById("location_div");

Update:

Try with else condition because possibly you have red color by default:

 if (getLocation.responseText === 'NOT FOUND'){
   dv.style.color = "red";
 }
 else {
  dv.style.color = "black";
 }