Question

I have a / group of radio buttons , and a CommandButton

Two cases

1)When one of the button is clicked + The command Button is clicked, I should display some other section(say a DIV) and the execution stops. means, The Command Button should not submit the form to the server

1)When NONE of the button is clicked + The command Button is clicked,I should submit the form to the server and display a Faces Message that he has not selected anything.

I don’t want to do this alert as a JavaScript popup.Suggestions are welcome.

Answer 1

Yes, that’s possible with a little help of JavaScript. Easiest would be to give the ID of the section div elements as radio button value and then loop through all radio buttons and show/hide the element based on the button’s checked state. At end you should let the JS function return false when any button is checked so that the button’s default action won’t be invoked and the form won’t be submitted to the server.

Here’s a kickoff example:

<h:form id="form">
    <h:selectOneRadio id="radio">
        <f:selectItem itemValue="section1" itemLabel="Show section1" />
        <f:selectItem itemValue="section2" itemLabel="Show section2" />
        <f:selectItem itemValue="section3" itemLabel="Show section3" />
    </h:selectOneRadio>
    <h:commandButton id="button" value="show section" 
        action="#{bean.submit}" onclick="return showSection(this.form)" />
    <h:messages />
</h:form>
<h:panelGroup layout="block" id="section1" class="section">section1</h:panelGroup>
<h:panelGroup layout="block" id="section2" class="section">section2</h:panelGroup>
<h:panelGroup layout="block" id="section3" class="section">section3</h:panelGroup>

with this CSS

.section {
    display: none;
}

and this JS

function showSection(form) {
    var radiobuttons = form['form:radio'];
    var selected = false;
    for (var i = 0; i < radiobuttons.length; i++) {
        var radiobutton = radiobuttons[i];
        var section = document.getElementById(radiobutton.value);
        if (radiobutton.checked) {
            section.style.display = 'block';
            selected = true;
        } else {
            section.style.display = 'none';
        }
    }
    return !selected; // Submits to server if none is selected.
}

and JSF bean (we of course assume that this action will only be invoked if none is selected).

public void submit() {
    FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Please select!"));
}