How to freeze or disable an update input form

Question

Hi, I wonder if it is possible for me to freeze or disable the entire update form? I have an input h:form with a check box in it. when users check the box, I would like to freeze or disable the entire form so that disallow users from changing inputs.

Thanks, and I am using JSF, Spring Web Flow, Facelets, and Trinidad.

Answer 1

You would want to use javascript to set all the form inputs to disabled when the user checks the checkbox. Something like:

document.getElementById('id').disabled = true;

You would do this for each input element where 'id' is the ID of that element.

Answer 2

If you want to disable only certain inputs, It is a good idea to enumerate them:

function OptCheckBox(chkd) {
 if (chkd == 'y') {
  document.frm.input1.disabled = true;
  document.frm.input2.disabled = true;
 }
}

Answer 3

You cannot disable an entire form at once. You really need to disable each of the input elements. There are basically two ways to achieve this.

First way is to use Javascript to submit the form to the server when the checkbox is clicked, so that you can use JSF component's disabled attribute to disable the elements. Here's a basic example:

<h:form>
    <h:selectBooleanCheckbox value="#{bean.freeze}" onclick="submit()" />
    <h:inputText value="#{bean.value1}" disabled="#{bean.freeze}" />
    <h:inputText value="#{bean.value2}" disabled="#{bean.freeze}" />
    <h:inputText value="#{bean.value3}" disabled="#{bean.freeze}" />
</h:form>

Here #{bean.freeze} should point to a boolean property.

Second way is to write a Javascript function for this. This does not require a form submit and saves you from one HTTP request-response cycle, which is better for user experience.

<h:form>
    <h:selectBooleanCheckbox onclick="disableForm(this)" />
    <h:inputText value="#{bean.value1}" />
    <h:inputText value="#{bean.value2}" />
    <h:inputText value="#{bean.value3}" />
</h:form>

The JS function disableForm() is basically simple. Just pass the checkbox in as function argument by this so that you can get the parent form by checkboxElement.form and then get all form elements by form.elements. You only need to make sure that you don't disable the checkbox itself, so that you could re-enable the form again :)

function disableForm(checkboxElement) {
    var elements = checkboxElement.form.elements;
    for (var i = 0; i < elements.length; i++) {
        var element = elements[i];
        if (element != checkboxElement) {
            element.disabled = checkbox.checked;
        }
    }
}

No need to know the ID's beforehand and this makes the JS code generic and reuseable.

Hope this helps.