2

Okay I have a question, may be simple. But I cannot seem to understand what is going on. I have 3 security question drop down menus. I have javascript on the ASPX page that removes questions/repopulates them when you select a questions (so you cannot reselect the questions in the other 2 boxes). This works wonderfully when a user is editing their profile with already selected questions. However, when a user first selects the questions where all three boxes are listing "Please select a question" at selectedIndex 0, the onChange doesn't fire. The function won't even go. I think this has a big something to do with the on change from selected index of 0. I have debugged this thing and it doesn't even enter the function. I even set the onchange action to flash an alert. It just seems something is going wrong when i try to action onchange from selected index of 0. Any ideas?

Tom
  • 1,047
  • 3
  • 24
  • 44
  • 1
    Well if the user doesn't **change** anything, why would the browser fire a "change" event? Maybe I misunderstand the question. – Pointy Jul 02 '10 at 15:10
  • Double check you are subscribed – MQS Jul 02 '10 at 15:11
  • Well it launches on page load because what if the user has questions saved already? This allows the drop down items to be removed from the other 2. This runs through a function that repopulates the lists and then compares each question and removes from each box the appropriate questions. However, for some reason when the selected index is 0 or the "Please select a question," the onChange command on my c# code does not fire the function. – Tom Jul 02 '10 at 15:14
  • Well, it does work, as you can see from this test page: http://gutfullofbeer.net/change-handler.html You should post some of your code. That might enable somebody to spot what your problem is. – Pointy Jul 02 '10 at 15:26
  • The weird thing is i even tested onChange with just a simple alert. for some reason it is not working. if all of the security questions are set on index 0 and "please select security questions" it wont onChange. Here is a simple test: securityQuestionDropDown1.Attributes.Add("onChange", "javascript:alert('HELLO');"); This does not even fire the alert. – Tom Jul 02 '10 at 15:34
  • I still don't completely understand when it is you expect the change event to fire. The browser fires "change" when the user *changes* the current value of the element, not when *code* changes the value of the element. – Pointy Jul 02 '10 at 16:11

3 Answers3

0

Maybe I'm missing something here from what you are describing.. The onChanged event will only fire if the selectedIndex changes. So if you bring down a dropdown list at selectedIndex(0) and re-select the first item onChange will not fire.

Markive
  • 2,350
  • 2
  • 23
  • 26
0

The first of a select tag's options (index 0) is by default already selected. This is why your onChange event won't fire if it is selected again.

The answers to this popular question may help. To allow your event to fire when any option is selected, you could for example change the default to 'no option selected' like this:

document.getElementById("mySelectTagId").selectedIndex = -1;
MatzFan
  • 877
  • 8
  • 17
-1

When you repopulate the lists, if you replace the item at index 0 ("Please selecte a question") with another item that represents a question then your event will not fire.

Either

1. You preserve the first item as a none selected index (so your drop downs will always show "please select a question" and the user need to change it). Or

2. You fire your event manually after you finish repopulating the dropdowns:

<html>
<head>
<script type="text/javascript">

function sOnChange(){
    alert('Changed');
}

function replaceItems(){
    var dropDown = document.getElementById('s');
    dropDown.innerHTML = "";
    for(var x=0;x<5;x++){
        var opt = document.createElement("option");
        opt.value = x;
        opt.appendChild(document.createTextNode("New options" + (x+1)));
        dropDown.appendChild(opt);
    }
    dropDown.onchange();
}
</script>
</head>
<body>
    <input type="button" onclick="replaceItems();" value="Replace Items"/>
    <select id="s" onchange="sOnChange()">
        <option>Press the button Please</option>
    </select>
</body>
</html>
MK.
  • 5,139
  • 1
  • 22
  • 36