JavaScriptDOM Chapter 5 Introduction to forms _ basic knowledge

In this chapter, I will introduce some codes used to detect user input. With these codes, you can also write your own detection functions. Because each form has different detection items, I cannot give you 10 thousand code. 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, then explain the submission time handler, and then some methods and attributes of the form itself. 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:

The Code is as follows:

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:

The Code is as follows:

Document. forms [0]. text. value = 'the new value ';

Select Boxes
This is also simple:

The Code is as follows:

User_input = document. forms [0]. select. value;

To change the selected project, you must modify selectedIndex, for example:

The 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:

The 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:

The 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:

The 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.

The Code is as follows:

For (I = 0; 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:

The 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)