hide part of form

Question

Hi, I have an asp.net mvc application where I want to hide/display part of form based on selected line in a dropdown list. This is done by jQuery script:

<script type="text/javascript" >
    $(document).ready(function() {
        $('#owners').change(function() {
            $("select option:selected").each(function() {
                $('.location').css("display", "none");
                $('#canDeleteUsers').css("display", "none");                    
            });
            if (($("option:selected").attr("value")) == "") {
                $("select option:selected").each(function() {
                    $('.location').css("display", "block");
                    $('#canDeleteUsers').css("display", "block");
                });
            }
        });
    });            
</script>

Now the problem is that when a user violates some of the logic and I return the View again to be validated, if the dropdown list was selected to the variant, which is supposed to hide the form part, it still appears.

Any ideas about it? Thanks in advance.

Answer 1

Extract your logic for hiding showing the form out into a function on it's own. Call this function on the change event and also call it on document ready.

Answer 2

Sure; the page is reloaded and the visibility will reset.

One option would be to move the logic that determines whether to hide the form part into a separate (named) function, and call that function once on document.ready as well as on the change event of the dropdown.