Question

I am using the following Ajax code on a PHP page to check to see if a sales tax field is populated. The sales tax field is populated only when a valid zip code is entered. How do I change the css style back once it has been flagged as missing the value?

var xmlhttp;


function showUser(str) {

    xmlhttp=GetXmlHttpObject();
    if (xmlhttp==null) {
        alert ("Browser does not support HTTP Request");
        return;
    }
    var url="response.php";
    url=url+"?q="+str;
    url=url+"&sid="+Math.random();
    xmlhttp.onreadystatechange=stateChanged;
    xmlhttp.open("GET",url,true);
    xmlhttp.send(null);
}

function stateChanged() {
    if (xmlhttp.readyState==4) {
        document.getElementById("result").value=xmlhttp.responseText;
        if(document.getElementById("result").value =='') {
            validateZip();
        }
    }
}

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;
}

function validateZip() {
    if(document.newagreementform.tax.value=="") {
        alert("A valid zip code in our service area is required.");
        document.newagreementform.zipcode.focus();
        document.newagreementform.zipcode.style.backgroundColor="#ffff99";
        document.newagreementform.zipcode.style.borderColor="#990000";      
        return false;
    }
    if(document.newagreementform.tax.value!=""){document.newagreementform.zipcode.style.backgroundColor="#ffffff";} 
}

Answer 1

How about putting an event on the input field for the zip code… something like:

<input Id="Zip" onkeypress="RemoveZipCodeErrorMessage()">

then your RemoveZipCodeErrorMessage() function would look something like:

function RemoveZipCodeErrorMessage()
{
// change to color you want to return to
document.newagreementform.zipcode.style.backgroundColor="#ffff99";                          
document.newagreementform.zipcode.style.borderColor="#990000"; 
}

Andrew