Javascript / jQuery Hide fields based on Selected Drop Down item

Question

I have some code that I have created for an OnChange event which works perfectly.

<script type="text/javascript">
                    function UpdEventChanged(selectEl) {
                        var text = selectEl.options[selectEl.selectedIndex].text;
                        if (text == "Sickness" || text == "Holiday") {
                            $("input[id$=eventPostCode").hide();
                            $("#ContentPlaceHolder1_LBLUpdPCReq").hide();
                            $("#ContentPlaceHolder1_lblUpdPC").hide();
                        }

                        else {
                            $("input[id$=eventPostCode").show();
                            $("#ContentPlaceHolder1_LBLUpdPCReq").show();
                            $("#ContentPlaceHolder1_lblUpdPC").show();
                        }
                    }
</script>

I need to integrate the above code to make it work on the Page Load event. Here is my code:

// update Dialog
    $('#updatedialog').dialog({
        autoOpen: false,
        width: 500,
        buttons: {
            "update": function() {
                //alert(currentUpdateEvent.title);

                var eventToUpdate = {
                    id: currentUpdateEvent.id,
                    //title: $("#eventName").val(),
                    title: $("#EventSalesPerson option:selected").text(),
                    description: $("#eventDesc").val(),
                    salesperson: $("#EventSalesPerson option:selected").text(),
                    eventPostCode: $("input[id$=eventPostCode]").val(),
                    eventname: $("#EventEventName option:selected").text()
                };

                 {
                    PageMethods.UpdateEvent(eventToUpdate, updateSuccess);
                    $(this).dialog("close");

                    currentUpdateEvent.title = $("#eventName").val();
                    currentUpdateEvent.description = $("#eventDesc").val();
                    currentUpdateEvent.salesperson = $("#EventSalesPerson option:selected").text();
                    currentUpdateEvent.eventname = $("#EventEventName option:selected").text();
                    currentUpdateEvent.eventPostCode = $("input[id$=eventPostCode]").val();

                    $('#calendar').fullCalendar('updateEvent', currentUpdateEvent);
                    location.reload(true);
                }

            },
            "delete": function() {

                if (confirm("do you really want to delete this event?")) {

                    PageMethods.deleteEvent($("#eventId").val(), deleteSuccess);
                    $(this).dialog("close");
                    $('#calendar').fullCalendar('removeEvents', $("#eventId").val());
                }

            }

        }
    });

If #EventEventName selected text = Holiday or Sickness then I need the following items to be hidden:

"input[id$=eventPostCode"
"#ContentPlaceHolder1_LBLUpdPCReq"
"#ContentPlaceHolder1_lblUpdPC"

And obviously if they are not selected then the above should be displayed.

Thanks

Vivian River · Accepted Answer · 2011-03-04 19:05:24Z

1

It looks like you need something about like this:

var EventEventNameText = $('#EventEventName').val();
if (EventEventNameText=='Holiday' || EventEventNameText=='Sickness') {
    $('#eventPostCode').hide();
    $('#ContentPlaceHolder1_LBLUpdPCReq').hide();
    $('#ContentPlaceHolder1_lblUpdPC').hide();
}

Let me know how that works for you.

answered Mar 4, 2011 at 19:05

Vivian River

32.6k64 gold badges212 silver badges327 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

James Over a year ago

Thanks, where would you suggest that I place this - my javascript knowledge is very limited. I tried placing it in this section of the .js file: $(document).ready(function() { But it doesn't seem to have worked.

Vivian River Over a year ago

I think that you probably need it to be within your $('#EventEventName').change() handler. Let me also suggest that you try putting an alert('hello') statement as the first statement in your function function for debugging purposes. That way, you know for sure when the function runs.

Collectives™ on Stack Overflow

Javascript / jQuery Hide fields based on Selected Drop Down item

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related