Disabled form fields not submitting data
Solution 1
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.
Solution 2
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
Solution 3
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.
Solution 4
add CSS or class to the input element which works in select and text tags like
style="pointer-events: none;background-color:#E9ECEF"
Related videos on Youtube
bardiir
I'm a web developer from germany and we're hiring - if you're a Web-Developer/Designer and looking for a job near Reutlingen/Stuttgart let me know: [email protected]
Updated on July 08, 2022Comments
-
bardiir almost 2 years
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.
-
DevWL over 3 yearsWhy not use "readonly" instead of "disabled"?
-
-
Mario Werner almost 6 yearsWouldn't recommend to use this, as it is heavily browser dependent.
-
Fauxpas over 5 yearsBro ... 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!
-
pseudocoder over 5 yearsThis script is concise and amazing, thank you so much. Great for work in MVC/Razor Pages
-
Jerzy Gebler about 4 yearsNice solution, the best I saw for MVC. Thx.
-
Daniel Butler almost 4 yearsif you want to only disable checkboxes then change the
$(':disabled')
to$('input[type="checkbox"]:disabled')
-
TheRealChx101 almost 3 yearsOr you can also simply add a hidden field