Disabled form inputs do not appear in the request

Question

I have some disabled inputs in a form and I want to send them to a server  but Chrome excludes them from the request    Is there any workaround for this without adding a hidden field     lt form action   Media Add  gt       lt input type  hidden  name  Id  value  123    gt        lt  -- this does not appear in request -- gt       lt input type  textbox  name  Percentage  value  100  disabled  disabled    gt     lt  form gt

User · Answer

To post values from disabled inputs in addition to enabled inputs, you can simply re-enable all of the form's inputs as it is being submitted.

<form onsubmit="this.querySelectorAll('input').forEach(i => i.disabled = false)">
    <!-- Re-enable all input elements on submit so they are all posted, 
         even if currently disabled. -->

    <!-- form content with input elements -->
</form>

If you prefer jQuery:

<form onsubmit="$(this).find('input').prop('disabled', false)">
    <!-- Re-enable all input elements on submit so they are all posted, 
         even if currently disabled. -->

    <!-- form content with input elements -->
</form>

For ASP.NET MVC C# Razor, you add the submit handler like this:

using (Html.BeginForm("ActionName", "ControllerName", FormMethod.Post,
    // Re-enable all input elements on submit so they are all posted, even if currently disabled.
    new { onsubmit = "this.querySelectorAll('input').forEach(i => i.disabled = false)" } ))
{
    <!-- form content with input elements -->
}

User · Answer

Semantically this feels like the correct behaviour  I d be asking myself  Why do I need to submit this value    If you have a disabled input on a form  then presumably you do not want the user changing the value directly  Any value that is displayed in a disabled input should either be   output from a value on the server that produced the form  or if the form is dynamic  be calculable from the other inputs on the form   Assuming that the server processing the form is the same as the server serving it  all the information to reproduce the values of the disabled inputs should be available at processing  In fact  to preserve data integrity - even if the value of the disabled input was sent to the processing server  you should really be validating it  This validation would require the same level of information as you would need to reproduce the values anyway   I d almost argue that read-only inputs shouldn t be sent in the request either   Happy to be corrected  but all the use cases I can think of where read-only disabled inputs need to be submitted are really just styling issues in disguise

User · Answer

I m updating this answer since is very useful  Just add readonly to the input   So the form will be    lt form action   Media Add  gt       lt input type  hidden  name  Id  value  123    gt       lt input type  textbox  name  Percentage  value  100  readonly  gt   lt  form gt

User · Answer

Elements with the disabled attribute are not submitted or you can say their values are not posted  see the second bullet point under Step nbsp 3 in the HTML 5 spec for building the form data set    I e     lt input type  textbox  name  Percentage  value  100  disabled  disabled    gt     FYI  per 17 12 1 in the HTML 4 spec    Disabled controls do not receive focus  Disabled controls are skipped in tabbing navigation  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     lt input type  textbox  name  Percentage  value  100  readonly  readonly    gt    FYI  per 17 12 2 in the HTML 4 spec    Read-only elements receive focus but cannot be modified by the user  Read-only elements are included in tabbing navigation  Read-only elements are successfully posted

User · Answer

I find this works easier  readonly the input field  then style it so the end user knows it s read only  inputs placed here  from AJAX for example  can still submit  without extra code    lt input readonly style  color  Grey  opacity  1    gt

User · Answer

Simple workaround - just use hidden field as placeholder for select  checkbox and radio  From this code to -  lt form action  quot  Media Add quot  gt       lt input type  quot hidden quot  name  quot Id quot  value  quot 123 quot    gt        lt  -- this does not appear in request -- gt       lt input type  quot textbox quot  name  quot Percentage quot  value  quot 100 quot  disabled  quot disabled quot    gt        lt select name  quot gender quot  disabled  quot disabled quot  gt             lt option value  quot male quot  gt Male lt  option gt             lt option value  quot female quot  selected gt Female lt  option gt       lt  select gt    lt  form gt   that code -  lt form action  quot  Media Add quot  gt       lt input type  quot hidden quot  name  quot Id quot  value  quot 123 quot    gt        lt input type  quot textbox quot  value  quot 100 quot  readonly   gt         lt input type  quot hidden quot  name  quot gender quot  value  quot female quot    gt       lt select name  quot gender quot  disabled  quot disabled quot  gt             lt option value  quot male quot  gt Male lt  option gt             lt option value  quot female quot  selected gt Female lt  option gt       lt  select gt   lt  form gt

User · Answer

You can totally avoid disabling  it is painful since html form format won t send anything related to  lt p gt  or some other label   So you can instead put regular   lt input text tag just before you have    gt    add this readonly  readonly   It wouldn t disable your text but wouldn t change by user so it work like  lt p gt  and will send value through form  Just remove border if you would like to make it more like  lt p gt  tag

User · Answer

If you absolutely have to have the field disabled and pass the data you could use a javascript to input the same data into a hidden field  or just set the hidden field too    This would allow you to have it disabled but still post the data even though you d be posting to another page

User · Answer

In addition to Tom Blodget s response  you may simply add  HtmlBeginForm as the form action  like this    lt form id  quot form quot  method  quot post quot  action  quot  Html BeginForm  quot action quot    quot controller quot   FormMethod Post  new   onsubmit    quot this querySelectorAll  input   forEach i   gt  i disabled   false  quot     quot

User · Answer

Using Jquery and sending the data with ajax  you can solve your problem     lt script gt       form id   submit function             input disabled id   prop  disabled   false          Rest of code         lt  script gt

User · Answer

Define Colors With RGBA Values Add the Following code under style  lt  DOCTYPE html gt   lt html gt   lt head gt   lt style gt   p7  background-color rgba 215 215 215 1     lt  style gt   lt  head gt   lt body gt   Disabled Grey none tranparent  lt form action  quot  Media Add quot  gt       lt input type  quot hidden quot  name  quot Id quot  value  quot 123 quot    gt        lt  -- this does not appear in request -- gt       lt input id  quot p7 quot  type  quot textbox quot  name  quot Percentage quot  value  quot 100 quot  readonly  quot readonly quot  quot    gt     lt  form gt   result

[html] Disabled form inputs do not appear in the request

Examples related to html

Examples related to forms

Examples related to http

Examples related to browser