Question

I have a form with a varying number of dropdown boxes rendered with HTML. I wish to pass to the user a value from one of these dropdown boxes – just one value. How can I do this? It’s such a simple thing but I have spent hours on it.

<form id="form" name="form" method="post" action="nextStep.cshtml">
   <select name="1">
      <option value="1">1</option>
      <option value="2">2</option>
   </select>

   <select name="2">
      <option value="3">3</option>
      <option value="4">4</option>
   </select>

   <button type="submit">Submit</button>

And in nextStep.cshtml I have :

var number = Request.form[//what can I do here?];

The dropdowns names are populated in a loop. The functionality I wish to have is for the user to select a value from one dropdown, and all others to be disabled. I then want to be able to extract just this piece of data in nextStep.cshtml.

How can I do this?

Error is in this code :

<script>
$(function(){
   $('#form select').change(function(){
      var thisDd = $(this);
      $('#myValueField').val(thisDd.val());
      $('#form select').each(function(i, e){
          if(thisDd.val() == ""){
            $(e).attr('enabled', 'enabled');
          } else{ 
          if(e==thisDd[0]) return; // not disable myself
          $(e).attr('disabled', 'disabled'); // disable other
        }
      });
   });
});
</script>

Answer 1

Using jQuery you can do this (not tested):

<hidden name="myValueField" id="myValueField">

// Submit the form after selection
$(function(){
   $('#form select').change(function(){
      $('#myValueField').val($(this).val());
      $('#form').submit();
   });
});

// or disable other dropdowns after selection
$(function(){
   $('#form select').change(function(){
      var thisDd = $(this);
      $('#myValueField').val(thisDd.val());
      $('#form select').each(function(i, e){
          if(e==thisDd[0]) return; // not disable myself
          $(e).attr('disabled', 'disabled'); // disable other
      });
   });
});