0

Register as ::

<td>        <h:selectOneRadio id="selection" value="#{LoginBean.role}" label="Action" required="true" onclick="javascript:showUserSelection(this)">
                            <f:selectItem itemValue="Customer" itemLabel="Customer" />
                            <f:selectItem itemValue="Manager" itemLabel="Manager" />
                            <p:ajax process="console" update="@form" />
                        </h:selectOneRadio>
            </td>
          </tr>

          <tr>
            <th><h:outputLabel value="Enter your Fee ::" id="fee"></h:outputLabel></th>

In this above code, I want to show outputLabel only if Manager radio button is selected. I wrote javascript but it it is not working.

<script>
   function showUserSelection(idFrom) {  
     if (document.getElementById){  
     var valueFrom = idFrom.value;  
       if (valueFrom == 'Manager'){  
         document.getElementById('fee').className="visible";
       }  
       else{  

         document.getElementById('fee').className="invisible"  
       }  
     }  
   } 
   </script>

? Can anybody please suggest me what is wrong above?

stephen
  • 1
  • 4

1 Answers1

-1

Pure javascript approach

window.onload = showHideMsg();

function showHideMsg() {
   document.getElementById("rdButton").onclick = () => {
      document.getElementById("msg").classList -= 'hide';
   }
}
.hide {
  display : none;
}
<input type="radio" id="rdButton"/>
A message will appear if u click the radio button
<div id="msg" class="hide">
You clicked radio...
</div>
Rajkumar Somasundaram
  • 1,225
  • 2
  • 10
  • 20
  • Hi, Thanks for suggestion. But, I need to do for JSF and in JSF it is not working. – stephen Dec 15 '17 at 10:20
  • @stephen: but the solution you created yourself is also pure javascript... Your jsf xhtml client-side is pure html and javascript. You either have to look at this answer and 'port' it to your id's etc OR take a totally different approach – Kukeltje Dec 15 '17 at 10:34