How to ensure a <select> form field is submitted when it is disabled?
Solution 1
<select disabled="disabled">
....
</select>
<input type="hidden" name="select_name" value="selected value" />
Where select_name
is the name that you would normally give the <select>
.
Another option.
<select name="myselect" disabled="disabled">
<option value="myselectedvalue" selected="selected">My Value</option>
....
</select>
<input type="hidden" name="myselect" value="myselectedvalue" />
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 <select>
.
If my memory serves me correctly, with IIS, you put it before, with Apache you put it after. As always, testing is key.
Solution 2
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);
});
});
Solution 3
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.
Solution 4
I faced a slightly different scenario, in which 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);
Solution 5
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');
});
});
Related videos on Youtube
Marquis Wang
Updated on January 28, 2022Comments
-
Marquis Wang over 2 years
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 thedisabled
attribute prevents the user from changing the value, but does not submit the value with the form.The
readonly
attribute is only available forinput
andtextarea
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 theoption
s 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.
-
Abhishek Madhani about 10 yearssorry for joining late, however solutions provided by @
trafalmadorian
workest the best. It disables all the inputs that are not selected. It would also work if it select has multiple options enabled.$('#toSelect')find(':not(:selected)').prop('disabled',true);
-
beastieboy over 9 yearsAlternatively, you could leave the control as disabled on the UI but retrieve the value in the action method: public ActionResult InsertRecord(MyType model) { if (model.MyProperty == null) { model.MyProperty = Request["MyProperty"]; } }
- Instead of disabling the
-
koustubh about 14 yearsThe control is NOT grayed out and the user CAN edit it. You failed to read the whole section and I quote: "The following elements support the readonly attribute: INPUT and TEXTAREA."
-
Phillip Whelan about 14 yearsthis sounds like the only viable option. If you use jQuery or javascript you can try to add the value when submitting in a submit handler.
-
Ilari Kajaste almost 13 yearsHow would this be dependant on the web server? Isn't it the client that renders the page with the select field, and thus in case of conflict like that it would be the client that decides whether to send the value to the server or not?
-
Jordan S. Jones almost 13 yearsIt depends on how the server handles multiple inputs with the same name.
-
Luke over 11 yearsYou'd better not rely on a specific server type, so I think the first approach is cleaner and less error-prone..
-
Jonathan over 11 yearsThis is the one I settled on, mainly because it's the least obtrusive.
-
Naeem Ul Wahhab about 11 yearsWow Great and easy solution. Thanks.. +1 from me :)
-
bkwdesign over 10 yearsI like this a lot.. depending on interactions in my form, elements become enabled/disabled back-n-forth... how to I re-enable a 'blurred' field in this scenario?
-
bkwdesign over 10 yearsFrom googling, looks like $('#selectbox').off('focus'); would do the trick of re-enabling
-
Jim Bergman over 10 yearsjQuery docs recommend using .prop and .removeProp for 'checked', 'selected' and 'disabled' instead of .attr and .removeAttr see http://api.jquery.com/prop/
-
Abhishek Madhani about 10 yearsThanks, I found yours the most logically simplest. However
attr
should changed withprop
, would look something like$('#toSelect')find(':not(:selected)').prop('disabled',true);
-
Abhishek Madhani about 10 years
$('#toSelect')find(':not(:selected)').prop('disabled',true);
as noted by @trafalmadorian -
Tomas about 10 yearsThis answer seems incomplete: it doesn't mention the need to use javascript to copy the value to the hidden field. Or is it not needed?
-
Jordan S. Jones about 10 years@Tomas There is no javascript required for this.
-
Joshua Dance almost 10 yearsThis should be the accepted answer. Much cleaner and least obtrusive.
-
Joshua Dance almost 10 yearsRelevant bit of @JimBergman's comment - "Properties generally affect the dynamic state of a DOM element without changing the serialized HTML attribute. Examples include the value property of input elements, the disabled property of inputs and buttons, or the checked property of a checkbox. The .prop() method should be used to set disabled and checked instead of the .attr() method. The .val() method should be used for getting and setting value." - from api.jquery.com/prop
-
Ze Luis over 9 yearsI know that this is an old answer, but this actually works. I don't know the reason of many downvotes.
-
Doglas about 9 yearsthe 'obj' parameter must be a jquery object
-
Tres over 8 yearsThanks @JoshuaDance. I've updated the answer to use
prop()
instead ofremoveAttr()
. The docs say to useprop()
for native properties instead ofremoveProp()
asremoveProp()
will completely remove the property. -
Matt van Andel over 8 years@Jordan: Browsers do not send disabled fields values to the server, which is why they are empty when you try to handle them server-side. If you have a hidden field with the desired value, and the visible field(s) are disabled, only the hidden field will be sent to the server. Ergo, the hidden field should only be created (via JS or server-side code) when the visible fields are disabled and there is no priority issue.
-
TommyDo about 8 yearsYou are genius one (Y)
-
W.M. about 8 yearsThis is one of the most incredible tricks I know about. Works perfectly. Thanks.
-
Countach almost 8 yearsExcellent solution.
-
Lucky over 7 yearsBut, it's not nice for multiple selectors. May be we can use
getElementsByTagName('select')
? -
Andy Beverley over 7 yearsI like this solution, but just be aware that if the user then uses the browser's back button to get back to the form, the controls will no longer be disabled.
-
toddmo about 7 years@jonathanconway good use of the word
obtrusive
. Extra elements are indeed obtrusive. -
Andrew over 6 yearsThis is only option if you need a form that works without javascript.
-
Andrew over 6 yearsworks for text boxes, doesnt work for select boxes, plus super easy to get around by clicking and holding down button