Wednesday, September 24, 2014

Disabled Form Fields Strange Behavior

Disabled form fields of html will not get the values (or will get null) after submitting the Form: 

Code like below for the input form fields in HTML will generate the disabled field. Disabled field is the one which is not editable, not focusable, won’t get tab navigation, and can’t select the field. These are the characteristics of the disabled form field. We can apply this attribute on all input fields, buttons, select box, etc. 

Please find the code below:

<input type=”text” name=”accountNumber” value=”123455” disabled=”disabled”   />

The above code will generate the disabled text field where we can’t be able to edit and select the field.

Characteristics of Disabled form fields:

1)   Disabled form field cannot be focusable, i.e. you cannot focus the field.
2)   Disabled fields are non-editable.
3)   Disabled fields will not be submitted when submission of form happens or when we will click on ‘Submit’ button.
4)   Disabled fields will give null values after submitting the form where you are getting the values (it may be struts action class in case of struts or servlet class in case of servlets.
5)   We can modify the values of disabled fields only through JavaScript at client side.

How to get disable behavior for any of the input field and also getting the non-null values after form submission:

1)   Make the field ‘readOnly’ instead of ‘disabled’ one by putting the attribute as ‘readonly=”readonly”’ for html fields and ‘readOnly=”true”’ for struts JSP fields.

2)   Prepare the CSS with the color of disabled fields (i.e. gray color), and apply this CSS to the fields which you made as readonly. Now the field is non-editable because of readonly attribute and looks like disabled field because of the CSS applied.

Characteristics of ‘readonly’ fields:

1)   Fields are not editable through the screen.
2)   Fields can be modified through JavaScript code at client side.
3)   Fields can be Focusable.
4)   Fields can be selectable.
5)   Tab navigation possible on the fields.
6)   Values can be submitted after form submission.
7)   No null values after form submission whenever field contains values while submitting.

This will solve the issue with disabled fields used in the view layer for specific purpose and will help to get the disabled behavior.