Chapter 5 about Javascript DOM Learning Forms

Because each form has different detection items, so I cannot give you 10 thousandCode. You need to build your own detection functions using these elements described in this chapter. I have another example later. You can also refer to it.

In this chapter, I will first discuss the limitations of using JavaScript to detect forms, and then explain how to process the submission time.ProgramAnd then some methods and attributes of the form. The last step is how to access the form elements.

Here is another article about the error and solution of the form described by Jeff Howden. Forms & JavaScript living together in harmony
Limitations
First, you need to know what the Javascript detection code will do after the user submits the form:
1. Javascript detection forms may look like the following. If the code finds an error, the submission will be paused, and a warning will be given to the user to input the correct data.
2. If there are no errors or Javascript is disabled, the form content will be sent to the server.
3. If the script on the server finds an error, some error messages will be returned. In this case, the user needs to return the form and then fill in the data again for submission.
4. If no error occurs, the server completes the necessary work and displays a thank-you message.
As you can see, data is detected twice during the submission process: javascript once is the server. Server-side detection is always feasible and reliable. Javascript detection is only useful when you enable the JavaScript function. Since the server is always reliable and effective and has nothing to do with the browser used by the user, why does it need JavaScript detection?
Javascript detection is an effective supplement to server-side detection, because it can be checked first when data is sent to the server. In this way, the user does not need to use the back button to modify the form content, which is very troublesome and it is quite troublesome to find the wrong content. Therefore, JavaScript detection is more helpful than Server Detection for user experience.
Therefore, JavaScript is not a complete detection mechanism, but it is still a good choice to supplement the server and be friendly to users. Therefore, we recommend that you use these two detection mechanisms to ensure the user experience and program security.
Onsubmit
When you use JavaScript to detect a form, the first thing is to create an onsubmit event handler. This program runs when the user submits the form. This program will check whether some fields have values, whether at least one check box is selected, or other content you need to check.
The Code is as follows:

Copy code The Code is as follows: <form action = "something. pl" onsubmit = "Return checkscript ()">

Checkscript () is the name of the program. This code must return true or false. If the returned value is false, the form will not be submitted. no matter whether the return value is true or false, the code will stop running.
The generated code is as follows:Copy codeThe Code is as follows: function checkscript (){
If (some value is/is not something ){
// Something is wrong
Alert ('alert user of problem ');
Return false;
}
Else if (another value is/is not something ){
// Something else is wrong
Alert ('alert user of problem ');
Return false;
}
// If the script makes it to here, everything is OK,
// So you can submit the form
Return true;
}

Of course, this code can be very complicated to write, if you need to detect a lot of form projects or a lot of single sheet. The basic idea is this: you traverse every element in the form that needs to be checked. If an error is found, false is returned, and the code stops running, and the form will not be submitted.
When you find an error, you should remind the user. You can use a warning box, but most of the Methods today are to generate an error message and add it to the end of the error message.
Only when you have checked all the elements at the end and no error is found, you will return true and the form will be submitted.
Form methods and attributes
Javascript has some built-in methods and attributes for processing forms. Three of them are important:
You can use the submit () method to submit a form. To submit the first form on the page, you can write: Copy code The Code is as follows: Document. Forms [0]. Submit ()
Note that when you use JavaScript to submit a form, the form event handler does not work.
Reset the form. You can:
[Code] Document. Forms [0]. Reset ()
I suppose there is no test. If you use this method, the event handler for resetting the form will not execute.
Finally, you can modify the action items of the form:
[Code] Document. Forms [0]. Action = 'the _ other_script.pl ';
This method is quite convenient if the form needs to be submitted to other pages in some cases.
Access form Element
To check the validity of a form, you must access the elements of the form to know what the user has entered. First, we need to access the form based on level 0 Dom. Write as follows:
[Code] Document. Forms [number]. elements [number]
After a page is loaded, JavaScript generates a forms array to store all forms on the page. Therefore, the first form is forms [0], and the second form is forms [1.
Javascript stores each element in the form into an array. The first element is elements [0], and the second element is elements [1]. All input, select, and textarea are an element.
Sometimes, it is better to use the name of the form and element. In HTML, You need to name each element, for example:
[Code] <form name = "personal" Action = "something. PL "onsubmit =" Return checkscript () "> 2 <input type = text size = 20 name = Name> 3 <input type = text size = 20 name = address> 4 <input type = text size = 20 name = City> 5 </form>
Now you can use the following method to access elements:
[Code] Document. Personal. Name 2 document. Personal. Address 3 Document. Personal. City
The benefit of using name is that the Code can still run when you disrupt the order of all elements on the page, but it won't work if you use arrays. For example, the city text box in the preceding example is document. forms [0]. elements [2], but when you put it first, it becomes a document. forms [0]. element [0]. Now you have to change the code.
Value Detection
Of course, the most important thing is to find out the value entered by the user or select the check box. Sometimes you want to fill in other information in the form.
The following code can help you access the elements in the form. All user input is saved in the user_input variable. Then you can check the validity.
Texts, textarea, and hidden fields
Very simple:
[Code] user_input = Document. Forms [0]. Text. Value

Text is the name of the text box, textarea, or hidden field. The Value Attribute gives the text of these elements and stores them in user_input.
You can also write directly:Copy codeThe Code is as follows: Document. Forms [0]. Text. value = 'the new value ';

Select boxes
This is also simple:Copy codeThe Code is as follows: user_input = Document. Forms [0]. Select. value;

To change the selected project, you must modify selectedindex, for example:Copy codeThe Code is as follows: Document. Forms [0]. Select. selectedindex = 2;

Now the third option is selected.
Old Browser
In the old browser, select boxes has no value attribute, so:Copy codeThe Code is as follows: var selectbox = Document. Forms [0]. Select;
User_input = selectbox. Options [selectbox. selectedindex]. Value

First, find the selected project. Document. Forms [0]. Select. selectedindex provides the number of the selected project. Javascript has created an options array containing all select boxes options. So we can use this array to know what the user has selected and store it in user_input.
Checkboxes
Checkboxes has some minor differences. We already know his value, but we need to know whether the user has chosen him. The checked attribute tells us. It has two values: true and false.
So:Copy codeThe Code is as follows: if (document. Forms [0]. checkbox. Checked ){
User_input = Document. Forms [0]. checkbox. Name
}

Checkbox is the name of the check box. If the check box is selected, we will get the name (you can also select the value) and pass it to user_input.
Select a check box:Copy codeThe Code is as follows: Document. Forms [0]. checkbox. Checked = true

Single region
Unfortunately, you cannot immediately find the selected ticket. You can only search for the item whose checked attribute is true after traversal.Copy codeThe Code is as follows: for (I = 0; I <document. Forms [0]. Radios. length; I ++ ){
If (document. Forms [0]. Radios [I]. Checked ){
User_input = Document. Forms [0]. Radios [I]. value;
}
}

Radios is the name of this group of ticket providers.
Note: Document. Forms [0]. radios is an array containing all single-dataset elements. It cyclically checks whether the checked attribute is true. If yes, a user_input is passed.
Document. Forms [0]. Radios. Length returns the number of all single orders.
If you select a single token, we can set its checked value to true:Copy codeThe Code is as follows: Document. Forms [0]. Radios [I]. Checked = true;

Http://www.quirksmode.org/js/forms.html
Reprinted please keep the following information
Author: Beiyu (TW: @ rehawk)