Disabled form fields not submitting data

Question

Is there any way (with a attribute flag or something like that) to enable form fields that are disabled to submit data?

Or, if that's not possible, is there any way to block fields from editing with css or any other attribute than disabled without hiding them?

My special case at the moment is an identifier for a data-set that should be shown in the form (uneditable) - if there is no better solution I think i'll use a hidden field in addition to the disabled one to hold the actual value with the disabled one showing it.

Answer 1

Checkout the readonly attribute http://www.w3schools.com/tags/att_input_readonly.asp

Answer 2

Elements with Disabled attribute are not submitted or you can say their values are not posted.

i.e.

<input type="textbox" name="Percentage" value="100" disabled="disabled" /> 

FYI,

1. Disabled controls do not receive focus.
2. Disabled controls are skipped in tabbing navigation.
3. Disabled controls cannot be successfully posted.

You can use readonly attribute in your case, by doing this you will be able to post your field's data.

i.e.

<input type="textbox" name="Percentage" value="100" readonly="readonly" />

FYI,

1. Read-only elements receive focus but cannot be modified by the user.
2. Read-only elements are included in tabbing navigation.
3. Read-only elements are successfully posted.

Note: READONLY doesn't work on checkboxes and select tags

Ref from

Answer 3

As it was already mentioned: READONLY does not work for <input type='checkbox'> and <select>...</select>.

If you have a Form with disabled checkboxes / selects AND need them to be submitted, you can use jQuery:

$('form').submit(function(e) {
    $(':disabled').each(function(e) {
        $(this).removeAttr('disabled');
    })
});

This code removes the disabled attribute from all elements on submit.

Answer 4

Use the CSS pointer-events:none on fields you want to "disable" (possibly together with a greyed background) which allows the POST action, like:

<input type="text" class="disable">

.disable{
pointer-events:none;
background:grey;
}

Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

Answer 5

We can also use the readonly only with below attributes -

readonly onclick='return false;'

This is because if we will only use the readonly then radio buttons will be editable. To avoid this situation we can use readonly with above combination. It will restrict the editing and element's values will also passed during form submission.

Answer 6

add CSS or class to the input element which works in select and text tags like

style="pointer-events: none;background-color:#E9ECEF"