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

Define Colors With RGBA Values

Add the Following code under style

<!DOCTYPE html>
<html>
<head>
<style>
#p7 {background-color:rgba(215,215,215,1);}
</style>
</head>
<body>

Disabled Grey none tranparent

<form action="/Media/Add">
    <input type="hidden" name="Id" value="123" />

    <!-- this does not appear in request -->
    <input id="p7" type="textbox" name="Percentage" value="100" readonly="readonly"" /> 

</form>

result

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

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

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 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

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

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

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

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

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

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    lt form onsubmit  this querySelectorAll  input   forEach i   gt  i disabled   false   gt       lt  -- Re-enable all input elements on submit so they are all posted            even if currently disabled  -- gt        lt  -- form content with input elements -- gt   lt  form gt    If you prefer jQuery    lt form onsubmit    this  find  input   prop  disabled   false   gt       lt  -- Re-enable all input elements on submit so they are all posted            even if currently disabled  -- gt        lt  -- form content with input elements -- gt   lt  form gt    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   gt  i disabled   false               lt  -- form content with input elements -- gt

[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