Disable/Enable on deselecting/selecting

Question

I want to disable the submit button on my jsp Page if the user has not agreed to the terms and conditions. I have tried many solutions available but still not getting through. Here is my code :

 <h:form id="form2" styleClass="align topLabel page">
 <h:selectBooleanCheckbox id="check" onclick="document.getElementById('form2:saveForm').disable = !this.checked"/>Agree                 
                <li class="buttons ">
                    <div class="center">
                        <h:commandButton id="saveForm" styleClass="btTxt submit"
                            type="submit" value="Submit"
                            action="#{declarationFormBean.formSubmit }"></h:commandButton>
                    </div>
                </li>
</h:form>

Please help.

score 2 · Answer 1 · answered Nov 19 '13 at 07:11

May the following code snippet help you

<script type="text/javascript">
        function checkClick(check) {
            document.getElementById('form2:saveForm').disabled = !check.checked; }
</script>

<h:form id="form2" >
        <h:selectBooleanCheckbox id="check" onclick="checkClick(this)"/>Agree                 
        <li class="buttons ">
            <div class="center">
                <h:commandButton id="saveForm" styleClass="btTxt submit"
                                 type="submit" value="Submit" disabled="true" ></h:commandButton>
            </div>
        </li>
</h:form>

Also you could add required field. Check this : RequiredCheckboxValidator

score 2 · Answer 2 · answered Nov 19 '13 at 08:41

2

Your button is always enabled on the server side, so correcting user-controlled code on the client side will still execute business action associated with the command button.

What you want is to disable button on the server by setting its disabled attribute to the inverse of the current checkbox value:

<h:selectBooleanCheckbox binding="#{agree}" ... />
<h:commandButton disabled="#{not agree.value}" ... />

What remains to be done is to submit the form either via ajax, by nesting <f:ajax render="form:button" />, or synchronously, by adding onclick="document.getElementById('form').submit();". Both changes must be done to the <h:selectBooleanCheckbox> tag.

answered Nov 19 '13 at 08:41

skuntsel

11,624
11
44
67

When I try to use It shows me Unknown Tag. I am new to JSF so not completely getting your answer. – Tanuj Nov 19 '13 at 11:25
What JSF version are you using? JSF 1.x, or JSF 2.x? AJAX support was added in JSF 2.0+. – skuntsel Nov 19 '13 at 12:09
In my Project Facets I can see the JSF version as 2.2 still it's showing unknown tag. – Tanuj Nov 19 '13 at 12:37
Then you need to nest ajax tag in a following manner: ``. – skuntsel Nov 19 '13 at 13:28
I am doing this in JSP and not in Facelets. Any method in JSP by which it can work. I know it's deprecated but still need it for my application. – Tanuj Nov 20 '13 at 05:12

Disable/Enable on deselecting/selecting

2 Answers2