CODEWITHSUNDEEP
jqueryformsasp.net-mvc-4
sagesky36
sagesky36

Reputation: 4692

Get the text from a Html.DropDownListFor

When submitting a form, I need the text value of the selected item in my dropdown list. My model just consists of a StatusID and a Description.

The text for the dropdown list is displayed properly and when I submit the form and am getting the associated value for the StatusID property, but the Description property is null.

I added a JS function with jQuery when the form is submitted, to retrieve the associated text value for my model at:

var selTypeText = $("#StatusID option:selected").text();

But, it never gets inside the JS function to hit that breakpoint.

What am I missing to get it to execute the JS function?

Here is my View:

@model YeagerTechModel.Status
@using YeagerTechResources
@{
    ViewBag.Title = "check for DDL";
}
<h2>
    "Dropdownlistfor retrieval"</h2>
@using (Html.BeginForm("AddSingleStatus", "Status", new AjaxOptions { HttpMethod = "POST", }))
{
    @Html.ValidationSummary(true)
    <table>
        <tr>
            <td>
                <div class="display-label">
                    @Html.LabelFor(model => Model.Description);
                </div>
                <div class="editor-field">
                    @Html.DropDownListFor(model => Model.StatusID, new SelectList((YeagerTechModel.Status[])ViewData["statuses"], "StatusID", "Description"));
                    @Html.ValidationMessageFor(model => Model.StatusID)
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <input type="submit" value='@Resources.Add' />
            </td>
        </tr>
    </table>
}

<script>
$(function () {
    $("form").submit(function(){
        var selTypeText= $("#StatusID option:selected").text();
        $("#Description").val(selTypeText);           
    });
});
</script>

Here is the pertinent source code before submitting the page:

<!DOCTYPE html>
<html>
<head>
    <title>check for DDL</title>
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />

    <link href="/Content/kendo/2013.1.703/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="/Content/kendo/2013.1.703/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
    <link href="/Content/kendo/2013.1.703/kendo.blueopal.min.css" rel="stylesheet" type="text/css" />
    <link href="/Content/kendo/2013.1.703/kendo.dataviz.blueopal.min.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/kendo/2013.1.703/jquery.min.js"></script>
    <script src="/Scripts/kendo/2013.1.703/kendo.all.min.js"></script>
    <script src="/Scripts/kendo/2013.1.703/kendo.aspnetmvc.min.js"></script>
    <script src="/Scripts/jquery.validate.min.js"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script src="/Scripts/modernizr-2.6.2.js"></script>

<h2>
    "Dropdownlistfor retrieval"</h2>
<form action="/Status/AddSingleStatus?HttpMethod=POST&amp;InsertionMode=Replace&amp;LoadingElementDuration=0" id="form0" method="post"><div class="validation-summary-valid" id="validationSummary"><ul><li style="display:none"></li>
</ul></div>    <table>
        <tr>
            <td>
                <div class="display-label">
                    <label for="Description">Description</label>;
                </div>
                <div class="editor-field">
                    <select id="StatusID" name="StatusID"><option value="1">Not Started</option>
<option value="2">In Progress</option>
<option value="3">Completed</option>
<option value="4">Deferred</option>
<option value="8">Reassigned</option>
<option value="9">NonIssue</option>
<option value="10">In Review</option>
<option value="11">Non Starter</option>
<option value="13">Post Review</option>
<option value="14">Reassigned</option>
</select>;
                    <span class="field-validation-valid" id="StatusID_validationMessage"></span>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <input type="submit" value='Add' />
            </td>
        </tr>
    </table>
</form><script type="text/javascript">


<script>
$(function () {
    $("form0").submit(function(){
        var selTypeText= $("#StatusID option:selected").text();
        $("#Description").val(selTypeText);           
    });
});
</script>

Upvotes: 1

Views: 3902

Answers (2)

Meryovi
Meryovi

Reputation: 6231

The value is not being posted because you're missing an HTML control for the Description property.

In your section:

            <div class="display-label">
                @Html.LabelFor(model => Model.Description);
            </div>

You should add a control (Hidden or TextBox with a readonly attribute, as you prefer), like this:

            <div class="display-label">
                @Html.LabelFor(model => Model.Description)
                @Html.TextBoxFor(model => Model.Description, new { @readonly = "readonly" })
            </div>

If you don't want to display the selected value in an additional control:

            <div class="display-label" style="display:none;">
                @Html.HiddenFor(model => Model.Description)
            </div>

Also, you have a small typo in your jQuery event handler:

<script>
$(function () {
    // Here says "form0", it should be: "#form0"
    $("form0").submit(function(){
        var selTypeText= $("#StatusID option:selected").text();
        $("#Description").val(selTypeText);           
    });
});
</script>

Alternatively, you could use asymptoticFault's advice and retrieve the description in your server-side code using the posted StatusID. This has the added bonus of being less vulnerable to possible manipulations by the user before your form reaches the server.

Upvotes: 2

asymptoticFault
asymptoticFault

Reputation: 4529

Try attaching a click handler to the button instead:

$(':submit').click(function () {
    var selTypeText= $("#StatusID option:selected").text();
    $("#Description").val(selTypeText);  
});

Alternatively, you could just retrieve the description server-side using the id. Recreate the list you are storing in ViewData["statuses"] and do something like:

// where list holds the same list that was set to ViewData["statuses"]
list.Where(x => x.StatusID == idFromPost).First().Description

Upvotes: 3

Related Questions