How to ensure a select form field is submitted when it is disabled

Question

I have a select form field that I want to mark as  readonly   as in the user cannot modify the value  but the value is still submitted with the form   Using the disabled attribute prevents the user from changing the value  but does not submit the value with the form   The readonly attribute is only available for input and textarea fields  but that s basically what I want   Is there any way to get that working   Two possibilities I m considering include    Instead of disabling the select  disable all of the options and use CSS to gray out the select so it looks like its disabled  Add a click event handler to the submit button so that it enables all of the disabled dropdown menus before submitting the form

User · Answer

The easiest way i found was to create a tiny javascript function tied to your form :

function enablePath() {
    document.getElementById('select_name').disabled= "";
}

and you call it in your form here :

<form action="act.php" method="POST" name="form_name" onSubmit="enablePath();">

Or you can call it in the function you use to check your form :)

User · Answer

Based on the solution of the Jordan  I created a function that automatically creates a hidden input with the same name and same value of the select you want to become invalid  The first parameter can be an id or a jquery element  the second is a Boolean optional parameter where  true  disables and  false  enables the input  If omitted  the second parameter switches the select between  enabled  and  disabled    function changeSelectUserManipulation obj  disable       var  obj     typeof obj      string           obj    obj      disable   disable    disable     obj is   disabled         if disable            obj prop  disabled   true               after   lt input type  hidden  id  select user manipulation hidden    obj attr  id      name     obj attr  name      value     obj val      gt          else           obj prop  disabled   false               next   select user manipulation hidden    obj attr  id    remove             changeSelectUserManipulation  select id

User · Answer

I was faced with a slightly different scenario  in that I only wanted to not allow the user to change the selected value based on an earlier selectbox  What I ended up doing was just disabling all the other non-selected options in the selectbox using     toSelect  find   not  selected    prop  disabled  true

User · Answer

lt select id  example  gt       lt option value    gt please select lt  option gt       lt option value  0   gt one lt  option gt       lt option value  1  gt two lt  option gt   lt  select gt     if  condition         you can t select         example   find  option   css  display   none     else       you can select        example   find  option   css  display   block

User · Answer

Just add a line before  submit             XYZ   removeAttr  disabled

User · Answer

I found a workable solution  remove all the elements except the selected one  You can then change the style to something that looks disabled as well  Using jQuery   jQuery function             form   submit function               select option not  selected    this  remove

User · Answer

I use next code for disable options in selections   lt select class  sel big  id  form code  name  code  readonly  readonly  gt      lt option value  user played game  selected  true  gt 1 Game lt  option gt      lt option value  coins  disabled    gt 2 Object lt  option gt      lt option value  event  disabled    gt 3 Object lt  option gt      lt option value  level  disabled    gt 4 Object lt  option gt      lt option value  game  disabled    gt 5 Object lt  option gt   lt  select gt      Disable selection for options    select option not  selected    each function       this  attr  disabled    disabled

User · Answer

it dows not work with the  input selector for select fields  use this       jQuery function          jQuery  form   bind  submit   function             jQuery this  find   disabled   removeAttr  disabled

User · Answer

lt select disabled  disabled  gt            lt  select gt   lt input type  hidden  name  select name  value  selected value    gt    Where select name is the name that you would normally give the  lt select gt    Another option    lt select name  myselect  disabled  disabled  gt       lt option value  myselectedvalue  selected  selected  gt My Value lt  option gt            lt  select gt   lt input type  hidden  name  myselect  value  myselectedvalue    gt    Now with this one  I have noticed that depending on what webserver you are using  you may have to put the hidden input either before  or after the  lt select gt    If my memory serves me correctly  with IIS  you put it before  with Apache you put it after  As always  testing is key

User · Answer

I whipped up a quick  Jquery only  plugin  that saves the value in a data field while an input is disabled  This just means as long as the field is being disabled programmaticly through jquery using  prop   or  attr      then accessing the value by  val     serialize   or  serializeArra   will always return the value even if disabled     Shameless plug  https   github com Jezternz jq-disabled-inputs

User · Answer

I ve been looking for a solution for this  and since i didnt find a solution in this thread i did my own      With jQuery     selectbox   focus function e          this  blur          Simple  you just blur the field when you focus on it  something like disabling it  but you actually send its data

User · Answer

Or use some JavaScript to change the name of the select and set it to disabled  This way the select is still submitted  but using a name you aren t checking

User · Answer

Another option is to use the readonly attribute    lt select readonly  readonly  gt            lt  select gt    With readonly the value is still submitted  the input field is grayed out and the user cannot edit it   Edit   Quoted from http   www w3 org TR html401 interact forms html adef-readonly     Read-only elements receive focus but cannot be modified by the user  Read-only elements are included in tabbing navigation  Read-only elements may be successful    When it says the element may be succesful  it means it may be submitted  as stated here  http   www w3 org TR html401 interact forms html successful-controls

User · Answer

Same solution suggested by Tres without using jQuery   lt form onsubmit  document getElementById  mysel   disabled   false   action       method  GET  gt       lt select id  mysel  disabled  disabled  gt      lt  select gt       lt input name  submit  id  submit  type  submit  value  SEND FORM  gt   lt  form gt    This might help someone understand more  but obviously is less flexible than the jQuery one

User · Answer

Disable the fields and then enable them before the form is submitted   jQuery code   jQuery function                    form   bind  submit   function            this  find   input   prop  disabled   false

[javascript] How to ensure a <select> form field is submitted when it is disabled?

Examples related to javascript

Examples related to html

Examples related to css

Examples related to forms

Examples related to html-select