Values of disabled inputs will not be submitted

Question

This is what I found by Firebug in Firefox.

Values of disabled inputs will not be submitted

Is it the same in other browsers?

If so, what's the reason for this?

You can set a 'readonly' attribute. Chrome for example renders it as a disabled field but does submit it. — peterrus, May 03 '13 at 13:52
Possible duplicate of [Disabled form inputs do not appear in the request](http://stackoverflow.com/questions/7357256/disabled-form-inputs-do-not-appear-in-the-request) — hazzik, Nov 09 '15 at 09:11

score 382 · Answer 1 · edited Sep 13 '15 at 10:02

382

disabled input will not submit data.

Use the readonly attribute:

<input type="text" readonly />

Source here

edited Sep 13 '15 at 10:02

Orkun

6,998
8
56
103

answered May 08 '13 at 10:24

Fred K

13,249
14
78
103

1

@FrankFang, Ok, but, when I'm passing data to Laravel collective's blade template. It won't work. cannot send data like that way. – ssi-anik Feb 08 '16 at 16:21
@ssi-anik `readonly` works, just make sure you pass "name" attr to the input. – BenNov Apr 10 '20 at 09:57
Is `readonly` an accepted standard? According to [developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) doesn't look like it. – ᴍᴇʜᴏᴠ May 18 '21 at 07:20
I don't get the point of having readonly only for inputs and textareas... How am I supposed to "disable" a select but still send the value via form submit? – Masiorama Dec 23 '22 at 09:14
1

@Masiorama the method of choice in these cases is set `` and add ``. Same name is not an issue as the select won't be submitted. As for the value the hidden one is sent, and it's ok since select is readonly so you know the select value beforehand. Select, checkbox, radio, ... don't have readonly as it prevents changing value, but they don't change value, rather `selected`, `checked`, etc. properties. – Niki Romagnoli May 04 '23 at 10:04
@NikiRomagnoli thanks for the reply. I kinda dislike the approach which imply 2 different inputs with the same name, but I guess it is a good workaround. Will try it, though, thanks! – Masiorama May 04 '23 at 12:42

Aziz · Accepted Answer · 2020-10-01T19:17:20.403

222

Yes, all browsers should not submit the disabled inputs, as they are read-only.

More information (section 17.12.1)

Attribute definitions

disabled [CI] When set for a form control, this Boolean attribute disables the control for user input. When set, the disabled attribute has the following effects on an element:

Disabled controls do not receive focus.

Disabled controls are skipped in tabbing navigation.

Disabled controls cannot be successful.

The following elements support the disabled attribute: BUTTON, INPUT, OPTGROUP, OPTION, SELECT, and TEXTAREA.

This attribute is inherited but local declarations override the inherited value.

How disabled elements are rendered depends on the user agent. For example, some user agents "gray out" disabled menu items, button labels, etc.

In this example, the INPUT element is disabled. Therefore, it cannot receive user input nor will its value be submitted with the form.
<INPUT disabled name="fred" value="stone">
Note. The only way to modify dynamically the value of the disabled attribute is through a script.

edited Oct 01 '20 at 19:17

answered Aug 31 '09 at 04:03

Aziz

20,065
8
63
69

104

Workaround: add an `` element with the same name/value as the disabled input. – John Kugelman Aug 31 '09 at 04:05
any info on which browser does and which doesn't obey ? – Allisone Jan 12 '13 at 17:52
98

use readonly="readonly" instead :) see http://stackoverflow.com/questions/7357256/disabled-form-inputs-do-not-appear-in-request – Adriano Jul 08 '13 at 13:03
2

@Allisone: Firefox & Chrome seem to obey this (disabled input are NOT submitted). Havn't tried on other browsers. – Adriano Jul 08 '13 at 13:03
2

@JohnKugelman why the same name? the disabled one won't be submitted anyway.. may as well give the true name to the hidden one and use a different one for the disabled one – Arth Oct 04 '18 at 14:53

score 40 · Answer 3 · edited Jul 07 '19 at 18:33

40

You can use three things to mimic disabled:

HTML: readonly attribute (so that the value present in input can be used on form submission. Also the user can't change the input value)
CSS: 'pointer-events':'none' (blocking the user from clicking the input)
HTML: tabindex="-1" (blocking the user to navigate to the input from the keyboard)

edited Jul 07 '19 at 18:33

Peter Mortensen

30,738
21
105
131

answered Apr 26 '18 at 21:39

Kodin

772
8
23

score 25 · Answer 4 · edited Oct 29 '21 at 11:33

25

They don't get submitted, because that's what it says in the W3C specification.

17.13.2 Successful controls

A successful control is "valid" for submission. [snip]

Controls that are disabled cannot be successful.

In other words, the specification says that controls that are disabled are considered invalid for submission.

edited Oct 29 '21 at 11:33

Muleskinner

14,150
19
58
79

answered Aug 31 '09 at 04:05

MiffTheFox

21,302
14
69
94

score 9 · Answer 5 · answered Jul 06 '22 at 00:56

9

<input type="text" disabled />

instead of this disabled use readonly

<input type="text" readonly />

answered Jul 06 '22 at 00:56

Rasathurai Karan

673
5
16

score 8 · Answer 6 · answered Apr 29 '20 at 08:36

There are two attributes, namely readonly and disabled, that can make a semi-read-only input. But there is a tiny difference between them.

<input type="text" readonly />
<input type="text" disabled />

The readonly attribute makes your input text disabled, and users are not able to change it anymore.
Not only will the disabled attribute make your input-text disabled(unchangeable) but also cannot it be submitted.

jQuery approach (1):

$("#inputID").prop("readonly", true);
$("#inputID").prop("disabled", true);

jQuery approach (2):

$("#inputID").attr("readonly","readonly");
$("#inputID").attr("disabled", "disabled");

JavaScript approach:

document.getElementById("inputID").readOnly = true;
document.getElementById("inputID").disabled = true;

PS disabled and readonly are standard html attributes. prop introduced with jQuery 1.6.

score 2 · Answer 7 · edited Jul 07 '19 at 18:34

2

Disabled controls cannot be successful, and a successful control is "valid" for submission. This is the reason why disabled controls don't submit with the form.

edited Jul 07 '19 at 18:34

Peter Mortensen

30,738
21
105
131

answered Jan 08 '15 at 11:05

Juan de Parras

768
4
18

score 1 · Answer 8 · answered Sep 30 '19 at 14:25

select controls are still clickable even on readonly attrib

if you want to still disable the control but you want its value posted. You might consider creating a hidden field. with the same value as your control.

then create a jquery, on select change

$('#your_select_id').change(function () {
    $('#your_hidden_selectid').val($('#your_select_id').val());
});

score 0 · Answer 9 · answered Mar 25 '22 at 05:18

Here's the Solution and still using disabled property. First disable your inputs on load.

$(document).ready(function(){
  $("formselector:input").prop("disabled",true);
  $( "formselector" ).submit(function( event ) {
      $(":disabled").prop("disabled",false);
      });
});

on submit enable all of them. this will assure everything is posted

Values of disabled inputs will not be submitted

9 Answers9

Attribute definitions

Linked

Related