Chrome and Firefox processing JavaScript/HTML differently

Question

Ok, so the weirdest thing happened here. I have a php file with Javascript to write onto elements based on events on the webpage. And there are 3 html forms on the page. One is a searchbox, one has all inputs hidden and gets submitted on a certain event, and one is a textbox and a button on clicking which the javascript writes the text to a certain element in the page. Also, this third form is itself written onto the document by the javascript on clicking another button. The problem is, while doing certain operations with this third form, i need to reference one of its inputs values (newSkillName).

So for this third form, In Chrome-

document.forms[1].newSkillName.value

works, while in Firefox-

document.forms[2].newSkillName.value

works.

I, however, managed to fix the code. But i'm still curious. Why did Chrome and Firefox process the abnormality differently?? Any idea?

Answer 1

Give the form elements unique ID attributes and reference them with document.getElementById(id).

You could also use the NAME attribute and reference the form by name document.forms["name_of_form"];

Answer 2

The quick workaround/copout fix is to hunt down the field in the DOM a diffferent way. For example, with id='NewSkillName' use document.getElementById('NewSkillName').value.