Issue with JQuery onchange() event

Question

So I have a drop-down list and a text-box:

<table>
                        <tr>
                            <td>Group Name: </td>
                            <td><%= Html.DropDownListFor(m => m.IndicationCalculatorGroupId, DropDownData.IndicationsGroup(SessionManager.Company.EntityID, ICConstants.IndicationsCalculatorGroupType), "", new { propertyName = "IndicationCalculatorGroupId", onchange = "UpdateField(this, false);GroupNameChange();" })%></td>
                        </tr>
                        <tr id="newGroupNameRow">
                            <td>New Group Name: </td>
                            <td><%= Html.TextBoxFor(m => m.IndicationCalculatorNewGroupName, new { @class = "economicTextBox", propertyName = "IndicationCalculatorNewGroupName", onchange = "UpdateField(this);" })%></td>
                        </tr>
                    </table>

I have JQuery on the page that shows/hides the text-box based on the drop-down selection.

function GroupNameChange()
        {
            $("#IndicationCalculatorGroupId").change(function() {
                if ($("#IndicationCalculatorGroupId option:selected").text() == 'Create a New Group')
                {
                    $("#newGroupNameRow").show();
                }
                else{
                    $("#IndicationCalculatorNewGroupName").val('');
                    $("#newGroupNameRow").hide();
                }
            });
        }

But it seems that the first time you change the drop-down to "Create a New Group", the text-box doesn't show or do anything, it's only when you select some other value and THEN select "Create a New Group" does the code start to work.

What's not wired up correctly?

score 1 · Accepted Answer · answered Feb 23 '11 at 15:18

1

try to put your code when the page is loaded:

$(function() {

  $("#IndicationCalculatorGroupId").change(function() {
                if ($("#IndicationCalculatorGroupId option:selected").text() == 'Create a New Group')
                {
                    $("#newGroupNameRow").show();
                }
                else{
                    $("#IndicationCalculatorNewGroupName").val('');
                    $("#newGroupNameRow").hide();
                }
            });


});

answered Feb 23 '11 at 15:18

alexl

6,841
3
24
29

Well it works, just not when you go from the null "Empty" selection, to the "Create a New Group" selection. – slandau Feb 23 '11 at 15:19
@slandau - that's because, as I explained in my answer, your change handler isn't set up until AFTER the first time GroupNameChange is called. That's why @alexl's answer will work - it sets up the handler right away. – justkt Feb 23 '11 at 15:21

score 1 · Answer 2 · answered Feb 23 '11 at 15:20

Instead of:

function GroupNameChange()
        {
         ...
        }

Use:

$(document).ready(function()
        {
            $("#IndicationCalculatorGroupId").change(function() {
                if ($("#IndicationCalculatorGroupId option:selected").text() == 'Create a New Group')
                {
                    $("#newGroupNameRow").show();
                }
                else{
                    $("#IndicationCalculatorNewGroupName").val('');
                    $("#newGroupNameRow").hide();
                }
            });
        });

Right now GroupNameChange() has to be called once (the first call) for the change handler to be registered. You want that to happen on page load (at the ready event). You don't need the call to GroupNameChange() in the onchange, either. .change() will automatically be wired in. You can remove onchange altogether and call updateField from the .change() handler you have.

Alternatively, if you want to keep GroupNameChange, remove

$("#IndicationCalculatorGroupId").change(function() {
});

and just keep the lines where the function is. This will have GroupNameChange called every time as you've suggested without the other anonymous change handler being called.

score 0 · Answer 3 · answered Feb 23 '11 at 15:19

0

The onChange event is triggered once the value has been changed (ie: once you click out the selectbox). You should use the mouseDown() event.

answered Feb 23 '11 at 15:19

vaugham

1,821
1
19
38

Issue with JQuery onchange() event

3 Answers3