CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc
Alma
Alma

Reputation: 4430

Show/Hide part of the page based on dropdown choice in MVC 5

I have a dropdown in MVC5 "view" by changing the dropdown part of the page is going to show and hide. I like to call this function in page load but is not working properly it shows all the text boxes when page loads as I don't know how to send "e" to the page load and when I change the drop down it gave me this error:

  Microsoft JScript runtime error: 'toggleDIvDisplay' is undefined

This is my code:

@Scripts.Render("~/bundles/jquery")

<script type="text/javascript">

$(document).ready(

function toggleDIvDisplay(e) {

    if (e == 1) {
        $('#divAppName').hide();
        $('#divSSN').hide();
        $('#divRemref').hide();

    }

    if (e == 2) {
        $('#divAppName').show();
        $('#divSSN').hide();
        $('#divRemref').hide();

    }

    if (e == 3) {
        $('#divSSN').show();
        $('#divAppName').hide();
        $('#divRemref').hide();
    }


    if (e == 4) {
        $('#divRemref').show();
        $('#divSSN').hide();
        $('#divAppName').hide();

    }

and this is dropdown:

Search By: @Html.DropDownList("ddl", (SelectList)ViewBag.DropDownValues, new   { @onchange = "toggleDIvDisplay(this.value)" })

thanks everyone for the answer. Solution is to add this lines:

 $(document).ready(function () {
    toggleDIvDisplay(1);
});

Upvotes: 1

Views: 1425

Answers (4)

Sushil
Sushil

Reputation: 2835

assuming ddl is the id of your dropdown, you can try this.

EDIT: simplified your conditions.

$(function() {
    $('#ddl').on('change', function() {
        var value = $(this).val();

        $('#divAppName, #divSSN, #divRemref').hide();

        if (value == 2) {
            $('#divAppName').show();
        }       
        else if (value == 3) {
            $('#divSSN').show();
        }       
        else if (value == 4) {
            $('#divRemref').show();
        }

    });
});

Upvotes: 0

Mike G
Mike G

Reputation: 153

You could write your function in a way that it gets the value of the dropdown inside the function itself:

function setDivVisibility() {
    var e = $('#ddl').val();

    if (e == 1) {
        // Show/Hide elements
    } else if (e == 2) {
        // Show/Hide elements
    }
    // and so on...
}

Then call the function for the first time on document ready:

$(document).ready(function() {
    setModeVisibility();
});

Bonus: For unobtrusive JavaScript, put this in the document ready as well so you don't need to the onchange behavior mixed in with the html.

$('#ddl').change(function () {
    setModeVisibility();
});

Upvotes: 0

mahlatse
mahlatse

Reputation: 1307

First I dont think you should create the function in document.ready, From this link

defining it outside the document.ready will make it accessible to your jS after your page has loaded.

Upvotes: 1

Thomas Stringer
Thomas Stringer

Reputation: 5862

Right after you define the function in $(document).ready(), just call it:

toggleDIvDisplay(1);

The above assumes you want your page-load behavior to be when e is set to 1.

$(document).ready(
    function toggleDIvDisplay(e) {
        // ... your implementation, removed for brevity
    }

    toggleDIvDisplay(1);
);

Upvotes: 1

Related Questions