can I update a label using ajax, instead of a textbox?

Question

Hi,

I'm using ajax to update a textbox once the value in a drop down box has been selected. However, i only update/put text in it if certain conditions are met, so it looks rubbish when there is no message. I was thinking that having a label there would be much better, but is this possible? Can i have an empty label and just update the label text when needed?

Cheers leddy

Edit:

I'm using php and when the drop down box is selected, I am querying a mysql db (in the reports.php page) - depending on what the result of that is, decides whether i update the textbox or not:

function getHTTPObject(){
   if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
   else if (window.XMLHttpRequest) return new XMLHttpRequest();
   else {
   alert("Your browser does not support AJAX.");
   return null;
   }
}   

// Change the value of the outputText field
function setOutput(){
 if(httpObject.readyState == 4){
  document.getElementById('outputText').value = httpObject.responseText;
 }

}


function checkException()
{

 httpObject = getHTTPObject();
 if (httpObject != null)
 { 
  httpObject.open("GET", "reports.php?exceptions="
      +document.getElementById('exceptionsID').value+"&date1=" + document.getElementById('date1').value, true);
  httpObject.send(null);
  httpObject.onreadystatechange = setOutput;
 }
}

var httpObject = null;

the textbox is 'outputText' and is set in the setOutput() function

Hope this explains a little better

Cheers

Answer 1

Change the textbox into a span, and keep the id the same. Then change the code to set the innerHTML instead of the value:

// Change the value of the outputText field
function setOutput(){
        if(httpObject.readyState == 4){
                document.getElementById('outputText').innerHTML= httpObject.responseText;
        }

}

Answer 2

Assuming you're using ASP.NET, yes you can. Using the Text property of the label.

Answer 3

Something like this should change the text of the label.

// Change the value of the outputText field
function setOutput(){
        if(httpObject.readyState == 4){
                document.getElementById('outputText').innerHTML= httpObject.responseText;
        }

}

I updated my original post to reflect the code that was provided. This assumes that you are using the <label>, <div>, or <span> tags

Answer 4

The simplest way to handle this without a textbox is to create a SPAN tag, give it an id of "outputText", and then change the innerText of the SPAN like this:

function setOutput() {
   if(httpObject.readyState == 4) {
       document.getElementById('outputText').innerText = httpObject.responseText;
   }
}

Inside your HTML, you'll have your label defined like this:

<span id="outputText">Some default text here</span>

Of course, some CSS styling of the SPAN might be a good thing, but that's another matter for another time. Depending on your layout needs, a DIV tag may be better than a SPAN.