Get p:selectOneRadio value to a JS function

Question

I have a PF's selectOneRadio to choose a file type to download. Also I have a commandButton to call a download servlet using onclick attribute. The problem is that when I choose file type and click the button, the chosen value is of course not yet submitted. I'm looking for some way to get the chosen value available when I click on a download button.

Here's my code:

<p:selectOneRadio id="sorType" value="#{bean.type}" layout="custom">
    <f:selectItem itemLabel="XML" itemValue="XML" />
    <f:selectItem itemLabel="XLS" itemValue="XLS" />
    <f:selectItem itemLabel="CSV" itemValue="CSV" />
</p:selectOneRadio>

<p:commandButton type="button" ajax="false" onclick="return downloadFile('#{bean.type}');" />

Sva.Mu · Accepted Answer · 2015-10-02T21:23:10.967

If you want to check the selected value on client side, you will need to define widgetVar attribute for your p:selectOneRadio, for example:

<p:selectOneRadio widgetVar="widgetSorType" id="sorType" value="#{bean.type}"
    layout="custom">

    <f:selectItem itemLabel="XML" itemValue="XML" />
    <f:selectItem itemLabel="XLS" itemValue="XLS" />
    <f:selectItem itemLabel="CSV" itemValue="CSV" />
</p:selectOneRadio>

This will allow the element to be easily found - you can then use it further to check which value was actually selected. I can see two options how to do it:

function getSelectedTypeVer1() {
    return PF('widgetSorType').getJQ().find(':checked').val() || "";
}

function getSelectedTypeVer2() {
    var inputs = PF('widgetSorType').inputs;

    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].checked) {
            return inputs[i].value;
        }
    }

    return "";
}

Select whichever approach suits you better - both will return either the selected value or an empty string in case nothing has been selected. So all that remains is calling it in you button's onclick , so for example:

<p:commandButton type="button" ajax="false"
    onclick="return downloadFile(getSelectedTypeVer1());" />

Tested on PrimeFaces 5.2

score 2 · Answer 2 · answered Jun 06 '19 at 14:56

The solution shared by @Sva.Mu did not work for me.

I have an implementation quite similar to the last showcase in PrimeFaces Showcase referred to custom layouts with some <p:radioButton> pointing their own <f:selectItem>.

Instead of use PF('widgetName').getJQ().find(':checked').val(); I succeed with PF('widgetName').inputs.filter(':checked').val(); merging in some way both approaches.

My version of PrimeFaces: 6.1

Get p:selectOneRadio value to a JS function

2 Answers2

Linked