Getting the value of an inputField on the page

Question

I have a visualforce page with quite a few apex:inputField elements on it.

When the value of one of the inputfields is changed, I want to put that value into an output text area elsewhere on the page.. but I don't (and basically, can't) want to save the whole object in the background.

I have used an apex:actionSupport to watch for the onChange event, and it rerenders a component, which has the outputText on it.

The input text looks like this:

<apex:inputField value="{!Invoice__c.Country__c}">
    <apex:actionSupport event="onchange" reRender="invoiceData" />
</apex:inputField>

and the component on the same page looks like this:

<apex:outputPanel id="invoiceData">
    <c:invoiceDataComponent countryCode="XYZ" />
</apex:outputPanel>

The component then has a controller, and defines an apex:attribute binding to a variable (countryCode) into which I'd like to shove the value of the country text box.

But I cannot, for the life of me, work out what to put at XYZ above, to get the text in the inputField. If I could just put javascript in there, I'd put an ID on the input and use:

document.getElementById('inputID').value

But when I tried this, it just passed the string above in literally. This is quite frustrating!

Answer 1

I would suggest just updating your component to:

<apex:outputPanel id="invoiceData">
    <c:invoiceDataComponent countryCode="{!Invoice__c.Country__c}" />
</apex:outputPanel>

I believe by adding the ActionSupport to your your code should already be updating the value on the controller, so when your component rerenders it should have the updated value.

Answer 2

If you're up for stepping out of apex land, jQuery is great javascript library at this sort of thing. Assuming you have this input and output elements:

<apex:outputPanel id="output">Initial Value</apex:outputPanel>
<apex:inputText id="input" value="{!inputText}"/>

You could create a jquery function that copies value from one to the other on the change event

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
j$ = jQuery.noConflict();
j$().ready(function() {
  j$("[id$='input']").change(function() {
    j$("[id$='output']").html(j$("[id$='input']").val());
  });
});
</script>

JQuery has an amazing amount of sample code and tutorials including salesforce related examples. It's definitely worth the investment.

Answer 3

First make sure that the field is correctly getting assigned to the component's controller (add system.debug() statements around where you do the assignment and look through the debug logs.

The issue is probably that the code is not being assigned to the controller where the attribute draws it's value. I don't believe actionSupport submits the form with the value.

It's easily enough done by javascript, I'd use jQuery myself, but you can still:

Parent page (don't use actionSupport):

<apex:inputField value="{!Invoice__c.Country__c}" onChange="$('.inputField').val($(this).val());" />

In the component:

<apex:inputField value="" styleClass="inputField" />