可以在jsf中做到这一点吗？答案

【问题标题】：is it possible to do this in jsf?可以在jsf中做到这一点吗？
【发布时间】：2011-03-08 14:42:50
【问题描述】：

我有一个 / 组单选按钮和一个命令按钮

两种情况

1）当一个按钮被点击+命令按钮被点击时，我应该显示一些其他部分（比如一个DIV）并且执行停止。意思是，命令按钮不应该将表单提交到服务器

1)当NONE按钮被点击+命令按钮被点击时，我应该将表单提交到服务器并显示他没有选择任何东西的Faces Message。

我不想将此警报作为 JavaScript 弹出窗口进行。欢迎提出建议。

【问题讨论】：

“当一个按钮被点击时”你是指选择单选按钮还是什么？

标签： javascript jsf facelets

【解决方案1】：

是的，这在 JavaScript 的帮助下是可能的。最简单的方法是将部分 div 元素的 ID 作为单选按钮值，然后遍历所有单选按钮并根据按钮的 checked 状态显示/隐藏元素。最后你应该让JS函数在任何按钮被选中时返回false，这样按钮的默认操作就不会被调用，表单也不会被提交到服务器。

这是一个启动示例：

<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>

使用这个 CSS

.section {
    display: none;
}

还有这个 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.
}

和 JSF bean（我们当然假设这个动作将仅在没有被选择的情况下被调用）。

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

【讨论】：