Disable select box without removing value from message
In my current asp.net-mvc project, one of my pages allows the user to select a value from a dropdown after a post request is made that will update multiple values. To make sure that the postback defer does not confuse the user when choosing a different value (and thus creates another entry, creating another delay, etc.), I set the select disabled attribute to true. Disabled inputs are not sent to post-call.
How can I make it visually clear to the user that work is in progress and make it impossible to select a new value without removing the input from the message?
a source to share
Yes, that annoys me too.
Basically you need to hide the old button and replace it with the disabled one so that it looks the same to the user. Thus, it is still presented, but cannot be presented twice.
Actually I found what seems to be a duplicate of this in Problem with disabling submit buttons on form submit .
a source to share
None of the answers I found on Cletus' post were completely what I was looking for. Here's what I came up with. It's not 100% reusable, but it does what I need it to do and feel free to improve / edit.
$('#productMixSelectorForm').change(function() { $(this).ChangeSelection() });
jQuery.fn.ChangeSelection = function() {
var html = $('<div class="hidden">');
$(this).find('select, input').each(function() {
if ($(this).hasClass('hidden') == false) {
//Clone the original one into the hidden div
html.append($(this).clone());
//Disable the original (visible) one and make it name unique again
$(this).attr("disabled", true);
var name = $(this).attr("name");
$(this).attr("name", name + "disabledDummy");
}
});
//Add the collection of clones to the form so they get submitted
$(this).append(html);
$(this).submit();
}
a source to share