How to create h:selectOneRadio options with textarea, textbox and fileupload fields?

Question

I'm trying to make the following form in JSF 2.0 but a have some troubles:

screenshot

How can I make <h:selectOneRadio>s with textboxes and textareas inside?
How can I disbale the textareas or textboxes when the radio buton isn't selected?

Update: in fact, I have nothing yet about that form. I have only the basic datatable, I'm trying that:

<h:column>
  <h:selectOneRadio id="radio" layout="pageDirection" onclick="uncheckOthers(this)" > 
    <f:selectItem id="radio_1" itemLabel="Accesion Number: ">
      <h:inputTextarea id="radio" />
      <!-- Or another one objet distinct to <f:selectItem> -->
    </f:selectItem>
  </h:selectOneRadio>
</h:column>

I found the uncheckOthers() function in this web and the another function of which I think it does the same:

function seleccionarSequencesType(x){
    document.getElementById("gi").disabled=true;
    for (var i = 0; i < document.solicitud.sequencesType.length; i++) {
        if (document.solicitud.sequencesType[i].checked) {
            inhabilitar(document.getElementById(document.solicitud.sequencesType[i].value), false);
            //document.getElementById(x.value).disabled=false;
        } else {
            inhabilitar(document.getElementById(document.solicitud.sequencesType[i].value), true);
            //document.getElementById(document.solicitud.sequencesType[i].value).disabled=true;
        }
    }
}

function uncheckOthers(radio) {
    var name = radio.name.substring(radio.name.lastIndexOf(':'));
    var elements = radio.form.elements;
    for (var i = 0; i < elements.length; i++) {
        if (elements[i].name.substring(elements[i].name.lastIndexOf(':')) == name) {
            elements[i].checked = false;
        }
    }
    radio.checked = true;
}

I have a basic bean with String properties to save the information of the textareas, but it isn't fully developed yet, because at first I want to achieve the above requirement.

What do you have so far? – Bhesh Gurung Dec 05 '11 at 18:49 — Bhesh Gurung, Dec 05 '11 at 18:49

score 3 · Accepted Answer · edited May 23 '17 at 12:07

The standard JSF <h:selectOneRadio> component doesn't support this. Your best bet using Tomahawk's <t:selectOneRadio> with the layout attribute set to spread. This enables you to position the individual radio buttons as <t:radio> everywhere you want.

To disable the text fields depending on the radio button option value, just let its disabled attribute evaluate true when the desired radio button option value is not selected.

Here's a basic kickoff example:

<style>li { list-style-type: none; }</style>
...
<h:form enctype="multipart/form-data">
    <t:selectOneRadio id="options" value="#{bean.option}" layout="spread">
        <f:selectItem itemValue="text" itemLabel="Text in FASTA format" />
        <f:selectItem itemValue="number" itemLabel="Asseccion number" />
        <f:selectItem itemValue="file" itemLabel="Upload files" />
        <f:ajax render="@form" />
    </t:selectOneRadio>
    <ul>
        <li>
            <t:panelGrid columns="2">
                <t:panelGroup colspan="2">
                    <t:radio for="options" index="0" />
                </t:panelGroup>
                <h:outputLabel for="text1" value="1st sequence" />                
                <h:inputTextarea id="text1" value="#{bean.text1}" disabled="#{bean.option != 'text'}" />
                <h:outputLabel for="text2" value="2nd sequence" />                
                <h:inputTextarea id="text2" value="#{bean.text2}" disabled="#{bean.option != 'text'}" />
            </t:panelGrid>
        </li>
        <li>
            <t:panelGrid columns="2">
                <t:panelGroup colspan="2">
                    <t:radio for="options" index="1" />
                </t:panelGroup>
                <h:outputLabel for="number1" value="1st id" />                
                <h:inputText id="number1" value="#{bean.number1}" disabled="#{bean.option != 'number'}" />
                <h:outputLabel for="number2" value="2nd id" />                
                <h:inputText id="number2" value="#{bean.number2}" disabled="#{bean.option != 'number'}" />
            </t:panelGrid>
        </li>
        <li>
            <t:panelGrid columns="2">
                <t:panelGroup colspan="2">
                    <t:radio for="options" index="2" />
                </t:panelGroup>
                <h:outputLabel for="file1" value="1st sequence" />                
                <t:inputFileUpload id="file1" value="#{bean.file1}" disabled="#{bean.option != 'file'}" />
                <h:outputLabel for="file2" value="2nd sequence" />                
                <t:inputFileUpload id="file2" value="#{bean.file2}" disabled="#{bean.option != 'file'}" />
            </t:panelGrid>
        </li>
    </ul>
    <h:commandButton value="Submit" action="#{bean.submit}" />
</h:form>

Please note that Tomahawk also offers a <t:panelGroup> which adds the colspan support on top of the standard <h:panelGroup> and also a <t:inputFileUpload> to browse and select files. The latter requires the form's encoding type to be set to multipart/form-data. This in turn requires the ExtensionsFilter to be registered in web.xml as shown in this mini-tutorial: JSF 2.0 File upload.

score 0 · Answer 2 · answered Dec 05 '11 at 19:43

0

A radio button is a radio button, period. The textboxes should be separate elements (the nicest solution is to create custom components that include the radio button and the textboxes/file upload fields)
Use javascript. It gets ugly combined with JSF, but if you keep it in external files you should be fine.

answered Dec 05 '11 at 19:43

Razvan Pat

21
3

1

1) Perhaps you didn't understand the limitations of ``. 2) Not necessary. – BalusC Dec 05 '11 at 19:48

How to create h:selectOneRadio options with textarea, textbox and fileupload fields?

2 Answers2