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.

Duplicate the field in question. have a input with type hidden filled with the value you need to submit. Since you have your disabled field it doesn't change. When you fill one fill both. — Bruno, May 12 '23 at 10:25

score 56 · Answer 1 · answered Jun 25 '17 at 09:27

56

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.

answered Jun 25 '17 at 09:27

Mario Werner

1,771
14
24

1

Bro ... I didn't realise this was an issue till completing a whole page. So much javascript. Then I moved onto the backend and .... none of them were posting through. Thanks a lot for this answer! – Fauxpas Dec 03 '18 at 14:14
1

This script is concise and amazing, thank you so much. Great for work in MVC/Razor Pages – pseudocoder Feb 06 '19 at 19:07
1

Nice solution, the best I saw for MVC. Thx. – Jerzy Gebler Jun 17 '20 at 07:49
if you want to only disable checkboxes then change the `$(':disabled')` to `$('input[type="checkbox"]:disabled')` – Daniel Butler Jul 08 '20 at 17:51
1

Or you can also simply add a hidden field – TheRealChx101 Aug 09 '21 at 18:57

score 23 · Answer 2 · answered Mar 08 '18 at 19:36

23

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

answered Mar 08 '18 at 19:36

Tomasz

1,288
18
36

1

Wouldn't recommend to use this, as it is heavily browser dependent. – Mario Werner Jul 07 '18 at 17:00
I think this is the best answer, and pointer-events is now almost universally supported: https://caniuse.com/?search=pointer-events – Dan Swain Dec 16 '22 at 18:13
User is still able to navigate to the input via keyboard – mbehzad May 17 '23 at 10:23

score 4 · Answer 3 · answered Jul 20 '18 at 11:24

4

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.

answered Jul 20 '18 at 11:24

Kripa Yadav

111
1
3

Use of `readonly` instead of `disabled` attribute to keep `` data is such an elegant solution! – Nik Mar 31 '23 at 15:31

Paresh · Answer 4 · 2019-05-14T05:44:46.657

0

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

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

edited May 14 '19 at 05:44

answered May 14 '19 at 05:28

Paresh

77
1
6

Disabled form fields not submitting data

4 Answers4

Linked

Related