Question

我有一组/单选按钮和一个CommandButton

两个案例

1）当单击其中一个按钮+单击命令按钮时，我应显示其他部分（例如DIV）并执行停止。意味着，命令按钮不应该将表单提交给服务器

1）单击按钮的 NONE 时+单击命令按钮，我应该将表单提交给服务器并显示他未选择任何内容的Faces消息。

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

Answer 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!"));
}

是不是可以在jsf中这样做？

1 个答案: