ASP.Net MVC View with RadioButtonList with another freeformat choice

Question

I am collecting a registration question for an event.

One of the eventr registration issues:

What is your main job function? Director/MD/Owner Manager Team Leader Other: Please state 

I would like it to appear as a drop-down list or a list of radio buttons on my screen, but also with a text box below or next to the “Other” radio object, so that the free form “Other” job function can be entered. How do I relate this to my point of view?

I suspect my model will contain:

  [Display(Name = "What is your main job function?")] public string JobFunction { get; set; } 

... where the JobFunction is populated with the selected item above. But how do I override the selected item in my controller if it is “Other” and replace it with a text box on the view?

I am sure this has been done many times before - so thanks for any help,

Mark

Answer 1

One of many ways would be the following:

View:

  <div id="sample-dropdown"> <select name="JobFunction " id="JobFunction" class="dropdown"> <option value="Director/MD/Owner">Director/MD/Owner</option> <option value="Manager">Manager</option> <option value="Team Leader" selected="selected">Team Leader</option> <option value="Other">Other: Please state</option> </select> <input name="JobFunctionOther" id="JobFunctionOther" /> </div> <script type="text/javascript"> $('input[name="JobFunctionOther"]').hide(); $(function() { $("#JobFunction").change( function() { var val = $(this).val(); if (val =='Other') { $('input[name="JobFunctionOther"]').show(); } else { $('input[name="JobFunctionOther"]').hide(); } }).change(); }); </script> 

Controller:

 public ActionResult DropDown(string jobFunction, string jobFunctionOther) { if (!string.IsNullOrEmpty(jobFunctionOther)) jobFunction = jobFunctionOther; //do what you do return View(jobFunction); }