Question

I’m using jqWidgets with ASP.MVC. I am populating a dropdown list, when the form is submitted I want to pass the selected value from the dropdown to my controller when a button is pressed.

If I hard code a value like below everything works:

@using (Html.BeginForm("GetRace", "Schedule", new { @id = "abc" },FormMethod.Post))    
{  
    <div id="okBtn">
         <input id="Search" type="submit" value="OK" />
    </div>        
}

I would like to be able to call a Javascript function like:

   function getListItem()
   {
     return selectItem;
   }

However I can’t seem to get the call to work when I change the BeginForm to

   @using (Html.BeginForm("GetRace","Schedule",@ID = new {onsubmit = "return  (getListItem());" }))

Answer 1

You could use a hidden field inside the form:

@using (Html.BeginForm("GetRace", "Schedule", new { id = "abc" }, FormMethod.Post, new { id = "myForm" }))
{
    @Html.Hidden("SelectedListItem")
    <div id="okBtn">
        <input id="Search" type="submit" value="OK" />
    </div>        
}

and then subscribe to the .submit() event of this form unobtrusively and set set the value of the hidden field:

$(function() {
    $('#myForm').submit(function() {
        var selectedItem = 'some value that you will read from the dropdown';
        $('#SelectedListItem').val(selectedItem);
    });
});

or even better, simply put the dropdown inside the form. This way you don’t need to use any javascript at all and the selected value will automatically be POSTed to the controller when the form is submitted.