PDA

View Full Version : Problem in IE while creating checkbox with for property.

rameshk
03-27-2008, 12:46 PM
Hi Guys,

I am not able to understand why it is not working? If you look the code it is pretty simple.. I m just creating label and assigning this to my checkbox nothing else... .

Immediage help will be appriciated lot... :)

You can look the code its very simple just creation of checkbox followed by creation of label box... for joining purpose.

========== Code Start ================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<script lanaguage="JavaScript">
function testonload()
{

var context = document.getElementById("context");
var inputs = new Array();;
var filters = document.createElement('div');
context.appendChild(filters);
var Feedlist = "Alerts,Events,Message";
var feedNames = Feedlist.split(",");

for(i=0; i<feedNames.length; i++){

// Create a unique ID for the checkbox based on the widget ID
var inputID = "KKK" + "-filter-" + feedNames[i];

// Create an input the wacky IE-way
if (document.all) {
var strInput = "<input type='checkbox' id='"+inputID+"' value='"+feedNames[i]+"' checked='checked' />";
inputs[i] = document.createElement(strInput);
}
// Other browsers...
else {
inputs[i] = document.createElement('input');
inputs[i].type = 'checkbox';
inputs[i].id = inputID;
inputs[i].value = feedNames[i];
inputs[i].checked = true;
}
filters.appendChild(inputs[i]);

var label = document.createElement("label");
label.className = "inline";
label.setAttribute("for", inputID);
label.innerHTML = feedNames[i];
filters.appendChild(label);
//YAHOO.util.Event.on(this.inputs[i], 'click', this.updateDataTable, this, true);

}
}
</script>
</head>
<html>
<body onload="testonload()">
<div id="context">
</div>
</body>
</html>

========== Code End =================


Thanks in Advance,
RK
abduraooft
03-27-2008, 01:11 PM
I don't see any difference in FF and IE, what's your aim and the error that you've received in IE?
PS: Your doctype is invalid!
rameshk
03-27-2008, 01:17 PM
I am not able to build the relationship with label... Checkbox is not working through label click.
rameshk
03-27-2008, 01:24 PM
There is no bug which i can show you. But my basic purpose is to create the label for checkbox controls. I am working with IE 7.

If I create html document with same structure it works fine. only it wont work through javascript element creation process.

Please help!!!
abduraooft
03-27-2008, 01:49 PM
Then please post your working code , which might help us to understand your requirement.
rameshk
03-27-2008, 01:57 PM
I have given the code above is the only decopuled code. I can provide, there are code which is very complex to take out and hard to understand.

But above should be fine to make case.... for IE issue, you can copy that to html file and see that lable wont work for checkbox.
abduraooft
03-27-2008, 03:49 PM
Ha. interesting, never tried like this! Got a workaround, but I couldn't use the for attribute. See <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> New Document </title>
<script type="text/javascript">
function checkthis(LID){
//alert(LID);
LID=LID.substr(2);
var chk=document.getElementById(LID);
chk.checked? chk.checked=false : chk.checked=true;
}
function testonload()
{

var context = document.getElementById("context");
var inputs = new Array();;
var filters = document.createElement('div');
context.appendChild(filters);
var Feedlist = "Alerts,Events,Message";
var feedNames = Feedlist.split(",");

for(i=0; i<feedNames.length; i++){

// Create a unique ID for the checkbox based on the widget ID
var inputID = "KKK" + "-filter-" + feedNames[i];

// Create an input the wacky IE-way

if (document.all) {
var strInput = "<input type='checkbox' id='"+inputID+"' value='"+feedNames[i]+"' checked='checked' />";
inputs[i] = document.createElement(strInput);
}
// Other browsers...
else {

inputs[i] = document.createElement('input');
inputs[i].type = 'checkbox';
inputs[i].id = inputID;
inputs[i].value = feedNames[i];
inputs[i].checked = true;
}
filters.appendChild(inputs[i]);

var label = document.createElement("label");
label.className = "inline";
//label.setAttribute("for", inputID);
label.setAttribute("id", 'l_'+inputID);
label.innerHTML = feedNames[i];

label.onclick=function (){checkthis(this.getAttribute('id'));}
filters.appendChild(label);
//YAHOO.util.Event.on(this.inputs[i], 'click', this.updateDataTable, this, true);

}
}

</script>
</head>
<html>
<body onload="testonload()">
<div id="context">
</div>
</body>
</html>