JavaScript DOM Learning Chapter 5 Introduction to Forms_Basic Knowledge

Because the detection items of each form are different, I can’t give you a universal code. You'll need to build your own detection function using the elements I introduced in this chapter. I have an example on the next page for you to refer to.

In this chapter I will first discuss the limitations of using JavaScript to detect forms, then explain the submit time handler, and then some methods and properties of the form itself. The last thing is how to access the form elements.

Here is also an article by Jeff Howden introducing form usage errors and solutions. Forms & JavaScript Living Together in Harmony
Limitations
First, you need to understand what the JavaScript detection code will do when the user submits the form:
1 , When JavaScript detects the form, it may look like the following. If the code finds an error, the submission is paused and the user is given a warning to enter the correct data.
2. If there are no errors or JavaScript is turned off, the form content will be sent to the server.
3. If the server-side script finds an error, it will return some error information. In this case, the user needs to return to the form and refill the data before submitting again.
4. If no error occurs, the server completes the necessary work and displays a thank you message.
As you can see, the data is checked twice during the submission process: once by JavaScript and once by the server. Server-side detection is always possible and reliable. JavaScript detection is only useful when the user turns on the JavaScript function. So since the server is always reliable and effective and has nothing to do with the browser used by the user, why is JavaScript detection needed?
JavaScript detection is an effective supplement to server-side detection, because it can detect the data before it is sent to the server. In this way, the user does not have to use the back button to go back and modify the form content, which would be very troublesome, and it is also quite troublesome to find the incorrect content. Therefore, JavaScript detection is more helpful to the user experience than server-side detection.
So JavaScript is not a complete detection mechanism, but it is still a good choice as a server-side supplement and user-friendliness. Therefore, I recommend using these two detection mechanisms, which not only meet the user experience requirements but also ensure the security of the program.
onsubmit
When you use JavaScript to detect a form, the first thing you need to do is create an event handler for onsubmit. This program will run when the user submits the form. This program will check if certain fields have values ​​filled in, if at least one of those checkboxes is selected, or anything else you need to check.
The code is as follows:

Copy code The code is as follows:

checkscript() is the name of this program. This code needs to return true or false. If false is returned, the form will not be submitted, and the code will stop running regardless of whether it returns true or false.
So the generated code is as follows:

Copy the code The 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) {
                                                               the script makes it to here, everything is OK,
// so you can submit the form
return true;
}


Of course, this code can be written very complexly, if you need to detect many form items or a lot of radio button boxes. The basic idea is this: you iterate through every element in the form that needs to be checked, and if an error is found, it returns false, and then the code stops running and the form is not submitted.
When you find an error, you should alert the user. An alert box can be used, but most methods today are to generate an error message and append it to the error entry.
Only at the end, if you have checked all elements and found no errors, you will return true and the form will be submitted.
Methods and properties of forms
JavaScript also has some built-in methods and properties for processing forms. Three of them are more important:
You can use the submit() method to submit the 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 the user submits the form using JavaScript, the form's event handler will not work.
To reset the form, you can:
[code] document.forms[0].reset()
I assume, without testing, that if you use this method, then reset the form's event handler It will not be executed.
Finally you can modify the ACTION item of the form:
[code] document.forms[0].action = 'the_other_script.pl';
This is used if the form needs to be submitted to other pages under certain circumstances. The method is quite convenient.
Access form elements
Form validity detection requires access to form elements to know what the user has filled in. So first we need to access the form based on the Level 0 DOM. Generally written like this:
[code] document.forms[number].elements[number]
When the page is loaded, JavaScript will generate a forms array to store all the forms on the page. So the first form is forms[0], the second is forms[1] and so on.
JavaScript also 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 one element.
Sometimes, it is better to use the name of the form and element. In HTML, you need to name each element, such as:
[code] 2 3 4 5
Now you can Access elements through the following method:
[code] document.personal.name 2 document.personal.address 3 document.personal.city
The advantage of using name is that you can disrupt the order of all elements on the page The code can still run, but not if an array is used. For example, the city input box in the example above is document.forms[0].elements[2], but when you put it first, it becomes document.forms[0].element[0]. At this time you have to change the code.
Value detection
Of course, the most important thing is to find out the value filled in by the user or the check box selected. Sometimes you also want to fill in some other information in the form.
The following small snippets of code can help you access elements in the form. All this does is store user input in the user_input variable. After that, you can check the validity.
Texts, textarea and hidden fields
are very simple:
[code] user_input = document.forms[0].text.value

where text is the text box or textarea or hidden field name. The value attribute will give the text of these elements, which is then stored in user_input.
You can also write directly:

Copy the code The code is as follows:

document.forms[0]. text.value = 'The new value';

Select Boxes
This is also very simple:

Copy code The code is as follows:

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

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

Copy code The code is as follows:

document.forms[0].select.selectedIndex = 2;

The third option is now selected.
Old browsers
In old browsers, select boxes do not have a value attribute, then:

Copy code The code is as follows:

var selectBox = document.forms[0].select;
user_input = selectBox.options[selectBox.selectedIndex].value

Find first The item selected by the user is displayed. document.forms[0].select.selectedIndex gives the number of the selected item. JavaScript has created an options array containing all the select boxes. So you can know what the user selected through this array, and then store it in user_input.
checkboxes
checkboxes are slightly different. We already know its value, but we need to know whether the user selected it. The checked attribute can tell us. It has two values: true and false.
Then:

Copy the code The code is as follows:

if (document.forms[0 ].checkbox.checked) {
user_input = document.forms[0].checkbox.name
}

checkbox is the name of the checkbox. If the checkbox is selected, we get the name (or optionally the value) and pass it to user_input.
Selecting a checkbox can:

Copy code The code is as follows:

document.forms[0 ].checkbox.checked = true

Radio Box
Unfortunately, you can’t find out which radio box is checked at once. You can only find the item whose checked attribute is true after traversing.

Copy code The code is as follows:

for (i=0;iif (document.forms[0].radios[i].checked) {
user_input = document.forms[0].radios[i].value;
}
}

radios is the name of this group of radio buttons.
Note that document.forms[0].radios is an array containing all radio button boxes, and the loop checks whether the checked attribute is true. If so, pass a user_input.
document.forms[0].radios.length returns the number of all radio button boxes.
If a radio button is selected, we can set its checked value to true:

Copy code The code is as follows:

document.forms[0].radios[i].checked = true;

Translation address: http://www.quirksmode.org/js/forms.html
Reprint Please keep the following information
Author: Beiyu (tw:@rehawk)