jsfprimefacesselectoneradio

How to get the selected option from p:selectOneRadio using javascript


How do you get which radio is selected within p:selectOneRadio using javascript/jquery ?

Since the p:selectOneRadio uses no radio tags I have no idea how to get the checked option using CSS selectors.

    <p:selectOneRadio onchange="reactToChangedRadio()" >
              <f:selectItem itemLabel="....." itemValue="..." />
              <f:selectItem itemLabel="....." itemValue="..." />
              <f:selectItem itemLabel="....." itemValue="..." />
    </p:selectOneRadio>

Solution

  • You can use the jquery solution or choose a simple javascript solution:

    document.getElementById("myFormId:mySelectId")[0].checked 
    

    See the post from CodeRanch: http://www.coderanch.com/t/210871/JSF/java/selectOneRadio-javascript-value

    UPDATE: I must admit that I'm in a dept, and I'm sorry for that but yesterday I haven't had much time...

    I must say that I haven't been able to get the radio value in the old fashioned javascript way:

                     <script type="text/javascript">
                          /*  <![CDATA[ */
    
                            function reactToChangedRadio(){
                               alert("I'm in!");
                               var myval;
                                for(i=0;i<3;i++){
                                        if(document.forms['myFormId']['myFormId:myRadio'][i].checked == true ){
                                            myval = document.forms['myFormId']['myFormId:myRadio'].text/value;
                                        }
                                    }
                                    alert( "val = " + myval );
                            }
                        /*    ]]> */
                    </script>
    

    On the other hand, this hard-coded solution works:

                     <script type="text/javascript">
                          /*  <![CDATA[ */
    
                            function reactToChangedRadio(){
                               alert("I'm in");
                               var myval;
                               if(document.forms['myFormId']['myFormId:myRadio'][0].checked == true ){
                                  myval = "first button";
                               }else if(document.forms['myFormId']['myFormId:myRadio'][1].checked == true ){
                                  myval = "second button";
                               }else if(document.forms['myFormId']['myFormId:myRadio'][2].checked == true ){
                                  myval = "third button";
                               }
    
                               alert( "val = " + myval );
                            }
                        /*    ]]> */
                        </script>
    

    ,but of course, because of Primefaces power, there is a server side solution(using ReuqestContext component):

                     <h:form id="myFormId">
                            <p:selectOneRadio id="myRadio" value="#{handleFiles.radioVal}" >
                                <p:ajax event="change" oncomplete="handleComplete(xhr, status, args)" listener="#{handleFiles.testMethod}" />
                                <f:selectItem itemLabel="1" itemValue=" first" />
                                <f:selectItem itemLabel="2" itemValue=" second" />
                                <f:selectItem itemLabel="3" itemValue=" third" />
                            </p:selectOneRadio>
                        </h:form>
    <script type="text/javascript">
     function handleComplete(xhr, status, args) {  
        alert("Selected Radio Value" + args.myRadVal);  
     } 
    </script>
    

    The server side code:

    private String radioVal;
    
    public String getRadioVal() {
        return radioVal;
    }
    
    public void setRadioVal(String radioVal) {
        this.radioVal = radioVal;
    }
    
    public void test(){
        RequestContext context = RequestContext.getCurrentInstance();  
        context.addCallbackParam("myRadVal", radioVal);
        System.out.println("radioVal: "+radioVal);
    }
    

    the ReuqestContext component can be found here: http://www.primefaces.org/showcase-labs/ui/requestContext.jsf (only for PF 3)