Disabled form inputs do not appear in the request

后端 未结 11 1858
暗喜
暗喜 2020-11-22 04:37

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 addin

相关标签:
11条回答
  • 2020-11-22 04:56

    I'm updating this answer since is very useful. Just add readonly to the input.

    So the form will be:

    <form action="/Media/Add">
        <input type="hidden" name="Id" value="123" />
        <input type="textbox" name="Percentage" value="100" readonly/>
    </form>
    
    0 讨论(0)
  • 2020-11-22 04:58

    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.

    0 讨论(0)
  • 2020-11-22 05:00

    Simple workaround - just use hidden field as placeholder for select, checkbox and radio.

    From this code to -

    <form action="/Media/Add">
        <input type="hidden" name="Id" value="123" />
    
        <!-- this does not appear in request -->
        <input type="textbox" name="Percentage" value="100" disabled="disabled" /> 
        <select name="gender" disabled="disabled">
              <option value="male">Male</option>
              <option value="female" selected>Female</option>
        </select>
    
    </form>
    

    that code -

    <form action="/Media/Add">
        <input type="hidden" name="Id" value="123" />
    
        <input type="textbox" value="100" readonly /> 
    
        <input type="hidden" name="gender" value="female" />
        <select name="gender" disabled="disabled">
              <option value="male">Male</option>
              <option value="female" selected>Female</option>
        </select>
    </form>
    
    0 讨论(0)
  • 2020-11-22 05:01

    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

    0 讨论(0)
  • 2020-11-22 05:03

    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 -->
    }
    
    0 讨论(0)
  • 2020-11-22 05:06

    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

    1. output from a value on the server that produced the form, or
    2. 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

    0 讨论(0)
提交回复
热议问题