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?

Without seeing the code this is only a guess: _If_ you have this dynamically created `form` nested within another `form`, browsers may treat them in a different way. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) says: "`[form] Permitted content: Flow content, but with no contained
elements.`". — Teemu, Jul 10 '13 at 12:51
Or, another blind guess, are all the forms error-free? Maybe one browser totally ignores forms with missing `action` attributes or something like that. — Mr Lister, Jul 10 '13 at 13:35
Just made a quick test with nested `form`s. FF22, Chrome27 and IE10 all return `1` from `document.forms.length`, though there were two `form`s in the HTML code. Can you provide a link to the page or save an example at http://jsfiddle.net ? — Teemu, Jul 10 '13 at 13:59
ok guys, i fixed the error in my code somehow...but i'm still curious. Why did Firefox and Chrome process it differently?? Any idea? — GothamCityRises, Jul 12 '13 at 04:50

score 0 · Accepted Answer · answered Jul 10 '13 at 12:41

0

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"];

answered Jul 10 '13 at 12:41

Louis Ricci

20,804
5
48
62

so you're saying, if i have a form like :
I call it as document.forms["formName"].newSkill.value ? – GothamCityRises Jul 11 '13 at 04:48
And I can also use document.getElementById("inputId").value ? where – GothamCityRises Jul 11 '13 at 04:56
@GothamCityRises - yes that is what I'm saying. You can reference the inputs or form directly by ID with getElementById. – Louis Ricci Jul 11 '13 at 11:32

Mark Kasson · Answer 2 · 2013-07-10T13:55:54.650

0

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.

edited Jul 10 '13 at 13:55

answered Jul 10 '13 at 12:49

Mark Kasson

1,600
1
15
28

Chrome and Firefox processing JavaScript/HTML differently

2 Answers2