CODEWITHSUNDEEP
javascriptjqueryrazorasp.net-mvc-5
PanzerRage
PanzerRage

Reputation: 29

MVC - show or hide (div) field dependent on drop down list

we have a drop down list that if you choose "Unsatisfactory" then a Retention field should show up. We are using MVC 5 It is not working here is what we have:

Drop down:

List<SelectListItem> satisfactionLevel = new List<SelectListItem>();
satisfactionLevel.Add(new SelectListItem
{
    Text = "Satisfactory",
    Value = "Satisfactory"
});
satisfactionLevel.Add(new SelectListItem
{
    Text = "Unsatisfactory",
    Value = "Unsatisfactory",
});

The fields:

   @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()

        <div class="form-horizontal">

           <div id="QPerformance" class="form-group row">
                @Html.LabelFor(model => model.QPerformance, htmlAttributes: new { @class = "control-label col-md-2" })
                <div  class="col-md-10">
                    @Html.DropDownListFor(model => model.QPerformance, satisfactionLevel, "----Select----")
                    @Html.ValidationMessageFor(model => model.QPerformance, "", new { @class = "text-danger" })
                </div>
            </div>


            <div id="QRetention" class="form-group" style="visibility: hidden">
                @Html.LabelFor(model => model.QRetention, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.QRetention, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.QRetention, "", new { @class = "text-danger" })
                </div>
            </div>
    }

The JavaScript section, this part we can't get the field to show or hide when we change the drop down:

  @section Scripts {
    <script type="text/javascript"  src="~/Scripts/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">

        $(function hideOnLoad() {
            $('#QRetention').hide();
        });


        $(function () {
            $(document).ready(function () {
                $('#QPerformance').change(function () {
                    if ($(this).val() != 'Unsatisfactory') {
                        $('#QRetention').hide();
                    } else {
                        $('#QRetention').show();
                    }
                });
            });
        });

    </script>
        }

Upvotes: 0

Views: 3295

Answers (2)

TriV
TriV

Reputation: 5148

Your problem is: Razor rendered your @Html.LabelFor(model => model.QPerformance) element the same id with its parent div element. Then js will not work correctly.

You can change your div id to solve it.

<div id="QPerformanceGroup" class="form-group row">

<div id="QRetentionGroup" class="form-group" >

And js

<script type="text/javascript">
    $(function () {
        if($('#QPerformance').val() != 'Unsatisfactory')
        {
            $('#QRetentionGroup').hide();
        }

        $('#QPerformance').change(function () {
            if ($(this).val() != 'Unsatisfactory') {
                $('#QRetentionGroup').hide();
            } else {
                $('#QRetentionGroup').show();
            }
        });
    });

</script>

Upvotes: 2

Farhad Bagherlo
Farhad Bagherlo

Reputation: 6699

$(document).on("change","#QPerformance",function () {
    if ($(this).val() != 'Unsatisfactory')
       $('#QRetention').hide();
    else 
       $('#QRetention').show();
});

Upvotes: 0

Related Questions