jquery not getting data from outputText field

Question

ok, I have a VF page. and some inputField as well as outputText, and I wanted to do some front end calculation on these data while a button is clicked. on the outputText, for example I have:

<apex:outputText id="processor_name" value="{!ProcessorName}" label="Processor" />

here is the button:

<button type="button" onclick="executeCalculation()">Calculate</button>

And here is the jquery

function executeCalculation(){  
                alert($j("[id$='num_locations']").val());  
}

the outputText field is displaying data from database just fine.

the alert message is just blank, not showing anything. if I change the script to

function executeCalculation(){  
        $j("[id$='num_locations']").hide();  
}

the field will hide just fine. I'm not sure why I can't get the data to display in the alert.

Answer 1

The jQuery .val() method is used to retrieve the value of an input element. You are attempting to use it to get the value from a non-input element which is why you are getting a null result.

Try using either of the two methods available for retrieving the contents of matched elements as text or html. (Usage depends on your specific need)

http://api.jquery.com/text/

function executeCalculation() {
    alert($j("[id$='num_locations']").text());
}

http://api.jquery.com/html/

function executeCalculation() {
    alert($j("[id$='num_locations']").html());
}