problem with dynamically adding elements to DOM and referencing them:

[N. Sloane]

Hi,

I've been having a bit of a problem over the last couple of days, as I
have been using some code to dynamically add and remove rows to a
table, then I loop through all the elements looking for ones with
specific names, then submit this via an AJAX call to a PHP script.

I've done this before successfully, but for some reason this times it
works in Internet Explorer, but not Firefox, whereas previously I've
had no problem get this to work in both.

I've included some code below. The main item is cell 3, as it will add
new input boxes called rental1, rental2, rental3, etc:


function addRowToTable()
{

var tbl = document.getElementById('pb');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow +
1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
nextYear = parseInt(nextYear) + parseInt(lastRow);

// cell 1
var cellOne = row.insertCell(0);
var textNode = document.createTextNode("");
cellOne.appendChild(textNode);

// cell 2
var cellTwo = row.insertCell(1);
var textNode = document.createTextNode("");
cellTwo.appendChild(textNode);
cellTwo.innerHTML = "<em>and / or Rental Payment
(&pound:</em>";
cellTwo.setAttribute("style", "text-align: left; ");
if (iteration % 2 == 0) {cellTwo.setAttribute("class", "b1")} else
{cellTwo.setAttribute("class", "b2")}

// cell 3
var cellThree = row.insertCell(2);
var el = document.createElement('input');
el.type = 'text';
el.name = 'rental' + iteration;
el.id = 'rental' + iteration;
el.size = 10;
if (iteration % 2 == 0) {cellThree.setAttribute("class", "b1")} else
{cellThree.setAttribute("class", "b2")}

cellThree.appendChild(el);


// cell 4
var cellFour = row.insertCell(3);
var textNode = document.createTextNode("");
cellFour.appendChild(textNode);
cellFour.innerHTML = "<em>Year (yyyy)</em>";
cellFour.setAttribute("style", "text-align: left;");
if (iteration % 2 == 0) {cellFour.setAttribute("class", "b1")} else
{cellFour.setAttribute("class", "b2")}

// cell 5
var cellFive = row.insertCell(4);
var textNode = document.createTextNode(nextYear);
cellFive.appendChild(textNode);
cellFive.setAttribute("style", "text-align: left;");
if (iteration % 2 == 0) {cellFive.setAttribute("class", "b1")} else
{cellFive.setAttribute("class", "b2")}



// cell 6
var cellSix = row.insertCell(5);

}


Now, I use the following code to loop through every element on the
page, and use a regex to locate all elements with the name "rental" in
it:

var re = /rental[0-9]{1,}/;
var eleNum = window.document.duty.elements.length; // duty is the
name of the form

for (var i=0;i < eleNum;i++){

ele = window.document.duty.elements.name;

if(re.test(ele)) {eleval =
window.document.duty.elements.value;

// Further Error checking code goes here
}

When I check the DOM Inspector in Firefox, input elements such as
rental1, rental2, etc, are clearly showing in the DOM. However,
Firefox fails to pick the dynamically added elements and fails to
submit them. However, IE does.

I have used virtually identical code in a similar application, and
Firefox detects them without a problem.

I'm totally vexed as to what is going wrong here. Does anyone have any
ideas?

Many Thanks
Regards
Neil.

 

[Sean Kinsey]

Hi,

I've been having a bit of a problem over the last couple of days, as I
have been using some code to dynamically add and remove rows to a
table, then I loop through all the elements looking for ones with
specific names, then submit this via an AJAX call to a PHP script.

<snip>

Could you post it in its full form using http://jsfiddle.net/ ?
Its easier to debug when you have the full story, like doctype etc.

 

[Thomas 'PointedEars' Lahn]

N. Sloane wrote:
^^^^^^^^^
Who?

[...]
I've done this before successfully, but for some reason this times it
works in Internet Explorer, but not Firefox, whereas previously I've
had no problem get this to work in both.

Be more specific. For example, which Internet Explorer, which Firefox?
And what about all the other browsers?

[...]
function addRowToTable()
{
var tbl = document.getElementById('pb');

Do feature tests.

var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow +
1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);

You could have simply passed -1:

<http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39872903>

nextYear = parseInt(nextYear) + parseInt(lastRow);

<http://jibbering.com/faq/#parseIntBase>

You have also forgotten to declare `nextYear', which is error-prone.

// cell 1
var cellOne = row.insertCell(0);

Again, why not simply pass -1?

<http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39872903>

var textNode = document.createTextNode("");
cellOne.appendChild(textNode);

This does not make any sense.

// cell 2
var cellTwo = row.insertCell(1);
var textNode = document.createTextNode("");
cellTwo.appendChild(textNode);

See above.

cellTwo.innerHTML = "<em>and / or Rental Payment
(&pound:</em>";

Do not mix `innerHTML' with DOM Level 2+.

cellTwo.setAttribute("style", "text-align: left; ");

Avoid setAttribute().

cellTwo.style.textAlign = "left";

if (iteration % 2 == 0) {cellTwo.setAttribute("class", "b1")} else
{cellTwo.setAttribute("class", "b2")}

cellTwo.className = (iteration % 2 == 0) ? "b1" : "b2";

// cell 3
[...]

See above.

// cell 4
[...]

You want to use a loop here, and you probably want to add a document
stylesheet with a class for the table row instead of setting dozens of
inline styles for the cells.

Now, I use the following code to loop through every element on the
page, and use a regex to locate all elements with the name "rental" in
it:

var re = /rental[0-9]{1,}/;

var re = /rental[0-9]+/;

var eleNum = window.document.duty.elements.length; // duty is the
name of the form

var eleNum = document.forms["duty"].elements.length;

<http://jibbering.com/faq/#formControlAccess>

Use multi-line pre-comments, not single-line post-comments for
documentation.

for (var i=0;i < eleNum;i++){

ele = window.document.duty.elements.name;

You forgot to declare `ele'.

if(re.test(ele)) {eleval =
window.document.duty.elements.value;

Why `ele' if you still grow reference worms?

<http://jibbering.com/faq/#posting> pp.


PointedEars