CODEWITHSUNDEEP
jsfjsf-2primefaces
Chandan Sarma
Chandan Sarma

Reputation: 308

how to hide or show a textbox depending on radiobutton value in jsf

I have a comment box and a need to show and hide the comment box depending on radio button select above. I dont want to use jquery and i am not getting any idea as am new to jsf primeface

My code is bellow is:

<h:outputText value="Action :" class="alignment"/>

<p:selectOneRadio id="console" 
                  value="#{examinationFormBean.action}" 
                  required="true" label="Action">
    <f:selectItem itemLabel="Ok" itemValue="ok" />
    <f:selectItem itemLabel="Have Issued" 
                  itemValue="haveissue" />
</p:selectOneRadio>

<h:outputLabel value="Comment:"></h:outputLabel>
<h:inputText id="compid"    
             value="#{examinationFormBean.comment}"/>

<p:commandButton  value="Proceed to Zonal Electrical Inspector>>"
                  action="#{examinationFormBean.saveFormStatusByOfficeAssistent()}"  
                  update="messageid"  
                  process="data"  
                  oncomplete="if (args &amp;&amp; !args.validationFailed) PF('test').hide()" >

    <f:ajax  update="datatable"/>
</p:commandButton>

Please help me to sort it out. thanks in advance

Upvotes: 1

Views: 4688

Answers (1)

wittakarn
wittakarn

Reputation: 3164

You can achieve by using JSF EL.

xhtml

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>hide some component</title>
    </h:head>

    <h:body>
        <h:form>
            <p:selectOneRadio id="console" 
                              value="#{examinationFormBean.radioVal}" 
                              required="true" label="Action">
                <f:selectItem itemLabel="Ok" itemValue="ok" />
                <f:selectItem itemLabel="Have Issued" 
                              itemValue="haveissue" />
                <p:ajax process="console" 
                        update="@form" />
            </p:selectOneRadio>

            <h:outputLabel value="Comment:" 
                           rendered="#{examinationFormBean.radioVal eq 'haveissue'}">
            </h:outputLabel>
            <h:inputText id="compid"    
                         value="#{examinationFormBean.comment}"
                         rendered="#{examinationFormBean.radioVal eq 'haveissue'}"/>
        </h:form>
    </h:body>

</html>

managedbean

@ViewScoped
@ManagedBean(name="examinationFormBean")
public class ExaminationFormBean implements Serializable{
    private String comment;
    private String radioVal;

    public String getComment() {
        return comment;
    }

    public void setComment(String comment) {
        this.comment = comment;
    }

    public String getRadioVal() {
        return radioVal;
    }

    public void setRadioVal(String radioVal) {
        this.radioVal = radioVal;
    }

}

Upvotes: 2

Related Questions