Prev: I.E. jscript error: 'document.getElementById(...)' is null or not an object.
Next: help - onChange and Confirm
From: HugeBob on 10 Jan 2008 08:52
Hi All,

I've written some Javascript that dynamically adds a row to an
existing table. It then adds table cells with radio buttons in each
cell. This script works fine in Firefox. But, in IE it only works up
to a point. The code follows. Everything happens as it should except
that the radio buttons don't function: i.e., you can't check any of
them.

var table = document.getElementById(IDArg);
var rows = table.getElementsByTagName("tr");
var insertionIndex=0, checkBoxID, currentIDNumber;

// Calculation insertion index
if (rows.length == 1)
insertionIndex = 1;
else
{
for (var i = 1; i < rows.length; i++)
{
currentIDNumber = parseInt(rows[i].id.substring(2));
checkBoxID = parseInt(id);
if (checkBoxID < currentIDNumber)
{
insertionIndex = i;
break;
}
}
if (insertionIndex == 0)
insertionIndex = rows.length;
}

var newHTMLTableRow = table.insertRow(insertionIndex); // Create
table row
newHTMLTableRow.setAttribute("id", "ps"+idArg); // Set its id
attribute

var rowLabelCell = document.createElement("td"); // Create row title
cell
rowLabelCell.setAttribute("class", "title"); // Set its class to
"title". NOT WORKING IN IE
rowLabelCell.setAttribute("width", "300"); // Set its width to 300
rowLabelCell.appendChild(document.createTextNode(textArg)); // Append
text node to the cell
var specSpanText = document.createElement("span"); // Create a span
specSpanText.setAttribute("class", "explanation"); // Set the span's
class
specSpanText.appendChild(document.createTextNode(" (specialized)
")); // Append text to the span
rowLabelCell.appendChild(specSpanText); // Append the span to the row
title cell

var radioCell1 = document.createElement("td");
radioCell1.align = "center";
var radioButton1 = document.createElement("input");
radioButton1.type = "radio";
radioButton1.name = nameArg;
radioButton1.value = valueArg;
if (defaultArg1 == radioButton1.value)
radioButton1.checked = true;
radioCell1.appendChild(radioButton1);

var radioCell2 = document.createElement("td");
radioCell2.align = "center";
var radioButton2 = document.createElement("input");
radioButton2.type = "radio";
radioButton2.name = nameArg;
radioButton2.value = valueArg;
if (defaultArg2 == radioButton2.value)
radioButton2.checked = true;
radioCell2.appendChild(radioButton2);

var radioCell3 = document.createElement("td");
radioCell3.align = "center";
var radioButton3 = document.createElement("input");
radioButton3.type = "radio";
radioButton3.name = nameArg;
radioButton3.value = valueArg;
if (defaultArg3 == radioButton3.value)
radioButton3.checked = true;
radioCell3.appendChild(radioButton3);

newHTMLTableRow.appendChild(rowLabelCell);
newHTMLTableRow.appendChild(radioCell1);
newHTMLTableRow.appendChild(radioCell2);
newHTMLTableRow.appendChild(radioCell3);

From: Michael White on 10 Jan 2008 19:26
HugeBob wrote:
....

This script works fine in Firefox. But, in IE it only works up
> to a point.
....

> rowLabelCell.setAttribute("class", "title"); // Set its class to
> "title". NOT WORKING IN IE


rowLabelCell.className= "title";

Mick
From: HugeBob on 15 Jan 2008 06:41
On Jan 10, 7:26 pm, Michael White <m...(a)mickweb.com> wrote:
> HugeBobwrote:
>
> ...
>
> This script works fine in Firefox. But, in IE it only works up> to a point.
>
> ...
>
> > rowLabelCell.setAttribute("class", "title"); // Set its class to
> > "title". NOT WORKING IN IE
>
> rowLabelCell.className= "title";
>
> Mick

Thanks! That worked. But, how do you get radio buttons to work in
DOM scripting? The following works in FF and doesn't in IE:

var radioCell1 = document.createElement("td");
var radioButton1 = document.createElement("input");
radioButton1.type = "radio";
radioButton1.name = "someName";
radioButton1.value = "someValue";
if (defaultArg1 == radioButton1.value)
radioButton1.checked = true;
radioCell1.appendChild(radioButton1);

The radio button is created and visible. But, when you click on them,
nothing happens: i.e., they don't hold a checked state. They don't
even go black. Can you suggest a good reference book for this?
From: SAM on 15 Jan 2008 08:15
HugeBob a �crit :
> The following works in FF and doesn't in IE:
>
> var radioCell1 = document.createElement("td");
> var radioButton1 = document.createElement("input");
> radioButton1.type = "radio";

that here doesn't work in my IE Mac ('type' is reserved :-( )

> radioButton1.name = "someName";
> radioButton1.value = "someValue";
> if (defaultArg1 == radioButton1.value)
> radioButton1.checked = true;

here you must append the td, then append ist content (I belive)

> radioCell1.appendChild(radioButton1);
>
> The radio button is created and visible. But, when you click on them,
> nothing happens: i.e., they don't hold a checked state. They don't
> even go black. Can you suggest a good reference book for this?

perhaps also change the order :

var radioCell1 = document.createElement("td");
var radioButton1 = document.createElement("input");
radioButton1.type = "radio";

// supposing myTbody.myRow is the targeted TR
myTbody.myRow.appendChild(radioCell1);

radioCell1.appendChild(radioButton1);
radioButton1.name = "someName";
radioButton1.value = "someValue";
if (defaultArg1 == radioButton1.value)
radioButton1.checked = true;


--
sm
From: mmurph211 on 17 Jan 2008 17:09
On Jan 15, 9:15 am, SAM <stephanemoriaux.NoAd...(a)wanadoo.fr.invalid>
wrote:
> HugeBob a écrit :
>
> > The following works in FF and doesn't in IE:
>
> > var radioCell1 = document.createElement("td");
> > var radioButton1 = document.createElement("input");
> > radioButton1.type = "radio";
>
> that here doesn't work in my IE Mac ('type' is reserved :-( )
>
> > radioButton1.name = "someName";
> > radioButton1.value = "someValue";
> > if (defaultArg1 == radioButton1.value)
> > radioButton1.checked = true;
>
> here you must append the td, then append ist content (I belive)
>
> > radioCell1.appendChild(radioButton1);
>
> > The radio button is created and visible. But, when you click on them,
> > nothing happens: i.e., they don't hold a checked state. They don't
> > even go black. Can you suggest a good reference book for this?
>
> perhaps also change the order :
>
> var radioCell1 = document.createElement("td");
> var radioButton1 = document.createElement("input");
> radioButton1.type = "radio";
>
> // supposing myTbody.myRow is the targeted TR
> myTbody.myRow.appendChild(radioCell1);
>
> radioCell1.appendChild(radioButton1);
> radioButton1.name = "someName";
> radioButton1.value = "someValue";
> if (defaultArg1 == radioButton1.value)
> radioButton1.checked = true;
>
> --
> sm

There's still work needed for this script, but it creates radio
buttons using createElement() in IE that work:

http://www.matts411.com/webdev/creating_form_elements_with_javascript
 |  Next  |  Last
Pages: 1 2
Prev: I.E. jscript error: 'document.getElementById(...)' is null or not an object.
Next: help - onChange and Confirm