MVC DropDownListFor Change value with JavaScript

Question

I have taken a crack at writing the JavaScript to handle the changing of a DropDownListFor but its wrong. I don't want to submit the form on the change. I want to select a value from the DropDownList, show the list has been changed but not submit the form as the form still has additional controls to be filled in. How do I do this with JavaScript of jQuery? Does it have to do a Postback?

Here is the JavaScript code I wrote and the form:

<script type="text/javascript">
    $(function () {
        $('#DropDownListForId').change(function () {
            $('form#myForm').submit();
        });
    });
</script>

<div class="container" style="padding-top: 20px;">
    @Html.LabelFor(x => x.CurrentPub)
    @Html.TextBoxFor(x => x.CurrentPub)
    <br/>
    <br/>
    <div class="form-holder">
        @using (Html.BeginForm(null, null, FormMethod.Post, new {id = "myForm"}))
        {
            <div class="row">
                <div class="col-xs-6">
                    <label>UI Element:</label>
                    @Html.DropDownListFor(m => m.SelectedUIItem, Model.UIItems, new {@id = "DropDownListForId"})
                </div>
                <div class="col-xs-6">
                    @Html.LabelFor(m => m.UseWholeMarkup)
                    @Html.CheckBoxFor(m => m.UseWholeMarkup)
                </div>
            </div>
        }
        <div class="row">
            <div class="col-xs-9">
                @Html.LabelFor(m =>  m.HTMLMarkupCode)
                @Html.TextAreaFor(m => m.HTMLMarkupCode, new { rows = "10", cols = "100" })
            </div>

        </div>
        <div class="row">
            <button class="btn btn-default" type="submit">Submit</button>
        </div>
    </div>
</div> 

Here's the ViewModel:

public class UIItemsViewModel
    {
        [Display(Name = "Current Pub: ")]
        public string CurrentPub { get; set; }

        // DropDownList
        public string SelectedUIItem { get; set; }
        // public IEnumerable<string> SelectedUIItem { get; set; }
        public IEnumerable<SelectListItem> UIItems { get; set; }

        // Checkbox
        [DisplayName("Use Whole Markup ")]
        public bool UseWholeMarkup { get; set; }

        // Text Area - Whole Markup
        [Display(Name = "HTML Markup Code: ")]
        public string HTMLMarkupCode { get; set; }

        public string HeaderText { get; set; }
        public string HeaderFColor { get; set; }
        public string HeaderBColor { get; set; }
        public string LogoURL { get; set; }
        public string FooterFColor { get; set; }
        public string FooterText { get; set; }
        public string FooterBColor { get; set; }
        public string BodyText { get; set; }
        public string BodyFColor { get; set; }
        public string BodyBColor { get; set; }
    }

Answer 1

Add an onsubmit to the form:

@using (Html.BeginForm(null, null, FormMethod.Post, new {id = "myForm", onsubmit="return CheckForm()}))

Then add a javascript function to see if everything is filled in:

function CheckForm() {
    var ret = true;
    if (document.getElementById("DropDownListForId").selectedIndex == 0) {
        ret = false;
    }
    // Add whatever other logic or checks you need
    return ret;
}

Answer 2

In short - it sounds like you want the normal behaviour of a dropdown list (or select). So remove the javascript, and it will work as you expect, no?

As to the comment - getting value and text. You're failing to tell us WHERE you want to display this. "Before" is not enough. Try this javascript instead, and perhaps you can make edits to suit your need:

<script type="text/javascript">
$(function () {
        $('#DropDownListForId').change(function () {
            alert('This is the selected value: ' + $(this).val() + ' and text: ' + $("option:selected", $(this)).text());
            //this should, hopefully, update the label with the current selected text. I doubt this is wanted, but it shows what could be done.
            $(this).parent().find('label').html($("option:selected", $(this)).text());
        });
    });
</script>