is it possible to do this in jsf?
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.
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!"));
}
精彩评论