CheckBox event executing on "delayed" event

[Grorange]

Writing ASP.NET pages, I have a need for client-side functions to prevent going to the server for every small change.

I have a list of server side created checkboxes filled with a lot of information being presented in a form on my site. In a JavaScript setup function, I attach the following event handler (I know syntax is wrong, I just simplified it for purposes within this post):

<for every checkbox>onchange = function()
{
  document.getElementById("LabelUserName").innerHTML = document.getElementById("LabelUserName").innerHTML + this.id + "...";
}

This is just to test the functionality of the checkboxes and the event handler. Currently, LabelUserName is a span, so I just want to print the ID of the CheckBox in that span every time the checkbox gets changed.

The problem occurs when I do click on the checkbox. The first time, nothing happens. Then, subsequent clicks (anywhere on the page) will load the LabelUserName with the id of the checkbox that was clicked previously.

The "delayed" event handling occurs only on the assigned function, i.e. the checkbox gets changed immediately when you click on it. So, that functionality isn't being delayed.

Anyone hear of this before? Can anyone help?

Thanks,
Billy

[acoder]

Can you give some more code - the generated source code, not .NET.

[Grorange]

This is my JavaScript function to setup my client-side operations. The HTML body tag executes Setup() on its onload event.

function Setup()
{
  var i;
  var elements = document.Form1.elements;
 
  for(i = 0; i < elements.length; i++)
  {
    if(elements[i].id.indexOf("Hidden") > -1)
    {
      //Hide/show division associated with this hidden input
    }
    if(elements[i].id.indexOf("CheckBox") > -1)
    {
      elements[i].onchange = function()
      {
        var ID;
 
        TruckID = this.id.substring(this.id.indexOf("CheckBox") + 8, this.id.length);
        document.getElementById("LabelUserName").innerHTML = document.getElementById("LabelUserName").innerHTML + ID + "...";
 
//      if(document.getElementById("Hidden" + ID))
//      {
//      }
//      else
//      {
//      }
      }
    }
  }
}

So, it goes through every element. There are some hidden fields I use to tell JavaScript which divisions need to be hidden or shown, and whether or not the information within each division has already been loaded. This way, I can prevent postbacks when the information is already available.

Then, for each checkbox I find, I just print the ID.

Let me know if there is anymore I can attempt to explain.

Thanks,
Grorange

[acoder]

ON line 16, you're declaring a variable ID, but you've not set it and then you use it on lines 19 and 21.

[Grorange]

ON line 16, you're declaring a variable ID, but you've not set it and then you use it on lines 19 and 21.

My bad, I didn't clean up my simplified version well enough. TruckID is actually ID.

I know for sure the code works. I've seen it in action. Every time I click on a checkbox (well, after I click after I click on the checkbox...), its ID shows up in the label.

Thanks,
Grorange

[acoder]

Instead of onchange, use onclick.

[Grorange]

Instead of onchange, use onclick.

I thought about that as a solution, but there is a problem because I'm creating these checkboxes in ASP.NET. So, when they create the checkboxes, they add a label (without an ID) and you can click on the label to check the checkbox also. If I were to use onclick, I would only be able to do my operation if they clicked on the checkbox.

Do you know how to handle events for these controls:

<CODE><label for="[ID of element]">[Some text]</label></CODE>

Thanks,
Grorange

[Grorange]

Brilliant! I decided to mess around and take your advice and use onclick. Apparently, JavaScript knows how to handle events on the labels used for the checkboxes too.

I have never seen:

<CODE><label for[ID]>[Text]</label></CODE>

and don't understand its underworkings. Anyone have a good explanation?

[acoder]

I have never seen:

<CODE><label for[ID]>[Text]</label></CODE>

and don't understand its underworkings. Anyone have a good explanation?

See this link. You can click on the label instead of a small box or a small radio button.