Changing background color of input text after comparing if two Strings have different value - jsf

Question

I have to radio buttons and text fields on the page. If the first radio button is clicked, the input text gets filled with the data. If the second radio button is clicked , then the same form gets updated and field with new information. In both cases I invoke two different functions for getting result. By default when I open the page, the first radio button is selected.
I have to color input text on the first radio button where the data in the first and second radio button are different. I have to compare if the value from for example (Name input text value from first radio button is equals to Name input text value from the second radio button). How to do that? I am new to PrimeFaces
<p:outputLabel for="name" value="#{msg['label.name']}" />
<p:inputText id="name" value="#{tab.radioButton=='First' ? tab.data.name1 : tab.data.name2}" disabled="true" />

Answer 1

You need ajax to update managed bean field when radio button is chosen, add conditional class to input field and refresh/update it.
XHTML
<h:form id="myForm">
<p:selectOneRadio value="#{tab.radioButton}">
<f:selectItem itemLabel="Choice 1" itemValue="First" />
<f:selectItem itemLabel="Choice 2" itemValue="Second" />
<p:ajax event="change" update=":myForm:name"/>
</p:selectOneRadio>
<p:outputLabel for="name" value="Name" />
<p:inputText id="name" value="#{tab.radioButton=='First' ? tab.data.name1 : tab.data.name2}" disabled="true"
styleClass="#{tab.radioButton == 'First' ? 'first-radio-checked' : 'other-radio-checked'}"/>
</h:form>
CSS
#myForm .first-radio-checked {
background-color: green;
}
#myForm .other-radio-checked {
background-color: red;
}