. Topicala Page Index Token

A Journal about the experiences I have developing little applications in C#, Perl, Html and Javascript and talking about things new things that I use. Always Geeky; Always Nerdy; Always poor Grammer!

I am a Software Analyst Developer working in Southport, England but living in Liverpool. I develop mainly in C# and ASP.Net. I have been developing comercial software for several years now. I maintain this site (hosted at SwitchMedia UK) as a way of exploring new technologies (such as AJAX) and just generally talking about techie geek issues. This site is developed through a host of Perl scripts and a liberal use of Javascript. I enjoy experimenting with new technologies and anything that I make I host here.

Quick Search

Web www.kinlan.co.uk

Sunday, October 23, 2005

Problem with Javascript in IE7

I have been having a problem in IE7 and Internet Explorer 6, by where if you dynamically create a checkbox, set it to checked = true and then add it in to the HTML document, it loses it's checked status.

var newCheck = document.createElement('<input name=relatedSearchesChk>');
newCheck.type = "checkbox";
newCheck.onclick = updateCheckStatus;//Function to Call when clicked
newCheck.relatedUrl = currSearch.Query;//Expando String
newCheck.relatedObject = currSearch; //Expand Object
newCheck.checked = isChecked; //DOESN't WORK. isChecked is just a local Booelan Variable.
tagCell1.appendChild(newCheck);

The closest related problem on the web that I found was this thread: Java Forums - Creating a checked Checkbox through javascript. The solution in this thread works.

However I found another solution. Update the checked status after it has been added to the document. I have no idea why it works like this but it does work.

var newCheck = document.createElement(<input name=relatedSearchesChk>');
newCheck.type = "checkbox";
newCheck.onclick = updateCheckStatus;//Function to Call when clicked
newCheck.relatedUrl = currSearch.Query;//Expando String
newCheck.relatedObject = currSearch; //Expand Object
tagCell1.appendChild(newCheck);
newCheck.checked = isChecked; //WORKS

If you know why this happens I would love to know: paul.kinlan@gmail.com

Technorati Tags
[feed], [feed], [feed], [feed], [feed], [feed]

Wikipedia Documents
Internet Explorer ,Internet Explorer Box Model Bug ,Tabbed Document Interface ,Mozilla Firefox ,Wikipedia: Check Box ,Javascript ,Ecmascript ,Wikipedia: Ajax ,Json

Comments: [Add New]

Hi Paul,

I have a similar problem to this, I have a form which I reallocate in
the dom. When I do it, all checkboxes are resetted in IE6.

Most interesting: If I have a checked checkbox, reallocate it to
somewhere else, uncheck it and then reallocate it back, it is checked
again.

Did you find a solution for your problem?

Andy

By Andy Adiwidjaja, at Monday, January 09, 2006 4:45:00 PM

Hi Andy,

Unfortuantly I don't have a solution for your problem.

Are you experiencing the problem when you appendChild in the DOM or are you adding the check box some other way?

The solution that I had was what a documented in this Blog Entry.

You might have to keep track of checkbox ID's and check status using an array. So that when you relocate the check box it will have to read the state from the array.

By Paul Kinlan, at Wednesday, January 11, 2006 9:24:00 AM

Hi Paul,

Yes, I did just this workaround you described. And yes, I did the reallocation of the form with appendChild.

Your problem was the only I found which was similar to mine... very strange.

Andy

By Andy Adiwidjaja, at Friday, January 13, 2006 11:06:00 AM