views:

435

answers:

3

In my current asp.net-mvc project one of my pages allows the user to select a value in a dropdown box after wich a post request is made that updates several values. To make sure the delay from the postback doesn't confuse the user into selecting another value (and thus creating another post, creating another delay etc) I set the select's disabled attribute to true.
Disabled inputs aren't submitted to the post call however.

How can I make it visually clear to the user that work is in progress and make it imposible to select a new value without removing the input from the post?

A: 

Yes, this annoys me too.

Basically what you need to do is hide the old button and replace it with a disabled one so it looks the same to the user. That way it's still submitted but can't be doubly submitted.

Actually I've found what seems to be a duplicate of this at Problem with disabling submit buttons on form submit.

cletus
A: 

None of the answers I found in Cletus' post was entirely what I was looking for.
Here is what I came up with. It's not 100% reusable, but it does what I need 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's 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();
}
borisCallens
+1  A: 

From your answer, I gather you are already using jQuery. In that case why don't you get the value of the select box, disable it, then post the value yourself?

Bonus : BlockUI is a nice jQuery plugin to, well, block the UI.

çağdaş