Problems in obtaining form elements in javascript

Source: Internet
Author: User

I. Test Environment
Browser: IE6 +, FF 3.5.5, Opera 10, Chrome 4.0.249, Safari 4.0.3

Ii. Example
Copy codeThe Code is as follows:
<Form name = "test-form" action = "" method = "">
<Input type = "checkbox" name = "kk">
<Script type = "text/javascript">
Var oForm = document. forms ['test-form'],
Eles = oForm. elements ['kk '];
Alert (eles. length); // undefined
Alert (eles. nodeType); // 1

3. solution (the method I think of is to change the acquisition method, based on YUI)
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Var oForm = document. forms ['test-form'],
Eles = YAHOO. util. Dom. getElementsBy (function (el ){
Return el. type = 'checkbox' & el. name = 'kk ';
}, 'Input', oForm );
Alert (eles. length); // 1

Document. formname. inputname

I have encountered this problem once before, but I forgot this time and still made another mistake, so I have to record it.

Take a look at this example:
Copy codeThe Code is as follows:
<Form name = "hehe">
<Input type = "checkbox" name = "haha"/>
<Form name = "hehe2">
<Input type = "checkbox" name = "haha"/>
<Input type = "checkbox" name = "haha"/>
<Script type = "text/javascript">
Document. write (document. hehe. haha. length );
Document. write ('<br/> ');
Document. write (document. hehe2.haha. length );

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" ""> <ptml xmlns = ""> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = gb2312 "/> <title> untitled document </title> </pead> <body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

I usually get used to this method when getting the input of a form, but this often leads to problems, because in many cases, I will compare whether the number of selected checkboxes is equal to the number of all checkboxes, however, an error occurs when only one object is returned, because it returns the checkbox itself and does not have the length attribute. Therefore, we need to first determine whether the obtained input has the length attribute for further operations.

In addition, the location is recorded. reload (), which also has an optional parameter, true or false. If omitted or set to false, it uses the HTTP header If-Modified-Since to check whether the files on the server have changed. If the document has changed, reload () will download the document again. If the document has not changed, this method will load the document from the cache. This is exactly the same as clicking the refresh button in the browser. If it is set to true, no matter what the last modification date of the document is, it will bypass the cache and re-download the document from the server. Is the legendary force refresh.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.