why this javascript is line is Right and the other isn't

Question

javascript with>

var customer=document.getElementById('custList').value;

and that works...

Why does it work BUT...

var customer=(form1.custList.value);

I get an error that form1 is not defined.

Especially why would this work in IE, and Chrome but not Firefox. It seems just as clearly stated to me, but I am not a script engine

Just trying to understand

Answer 1

I believe IE/Chrome/Opera incorrectly interpret id="form1" as name="form1" ( or vice versa? ) to account for legacy markup.

I would not rely on dom 0 level property accessing such as form1.custList and instead use document.getElementById. If it's too long to type, define a method to do it.. eg

function getId( id ) { return document.getElementById(id) }

Answer 2

Because the second idiom is not standard, while getElementById is, so it has to be supported by every browser to say that is javascript compatible.

Also, the second one should be, if I'm not mistaken, document.form1.custList.value.

Answer 3

Internet Explorer did a lot of things in it's own way. By all means, the first way is the correct way (using getElementById).
For backward compatibility many of these "bugs" still work, but you should not use them.
There are still differences between browsers. Using a JavaScript framework (like jQuery) helps a lot here, it is written to work well cross-browser (for the record, your code will be $('#custList').val(); using jQuery)

Answer 4

Internet Explorer stuffs all of your form elements by name into the window object as properties, which is fragile, incompatible, difficult to use with any finesse -- and what makes your second example work. Other browsers simply take the clean route of not implementing that interface at all, leaving you with the proper DOM functions. Or a toolkit. jQuery really is quite nice. ;)

Answer 5

if you want to refer to a form object in your page, you may use the 'document.forms' object, that is an array of form objects in the document. suppose we have a form like this:

<form method="post" action="somthing.php" name="myContactForm" id="contact_form">
   <input type="text" name="custList" id="custListId" />
</form>

to access the value in a correct way, you might use any of these methods: first acccess the form, then the element.

var form = document.forms['myContactForm']; // use the 'name' attribute as the array key

 // or if this is the first form appeared in the page. otherwise increase the index number to match the position of your target form.
 var form = document.forms[0];

// or access the form directly
 var form = document.getElementById('contact_form');

 // now get the element, from the form. you can access form elements, by using their name attribute as the key in the elemetns array property of the form object.
 var cust = form.elements['custList'].value();

or you can access a form element directly, without any form. you can refer any element in the document by its id, directly. no form is needed here.

 var cust = document.getElementById('custListId');

all these statements are valid JavaScript that run on IE, firefox, opera, chrome, etc. however you can refer to a form object in IE, by just calling its 'name' attribute. so this line works in IE (and as you are saying, chrome. I did not know that chrome handles it):

var cust = myContactForm.custList.value();

IE tries to map unknown window level properties (like myContactForm ) to elements by matching to their 'name' attribute.