JavaScript DOM Learning Chapter Fifth Form Introduction _ Basics

Because each form has different detections, I can't give you a one-size-Fits-all code. You need to build your own detection function with the elements I've described in this chapter. I have one more example in the back, which you can also refer to.

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

Here's an introduction to Jeff Howden's usage errors and solutions. Forms & JavaScript living together in Harmony
Limitations
First, you need to know what the JavaScript detection code does when the user submits the form:
1, JavaScript detection form may be like the following. If the code finds an error, the commit is paused and a warning is given to the user to enter the correct data.
2. If there are no errors or JavaScript is turned off, the form content is sent to the server side.
3. If the server-side script finds an error, it returns some error messages. In this case, the user needs to return to the form and then fill in the data again to submit.
4, if there is no error occurred, then the server side to complete the necessary work and show the gratitude information.
As you can see, data is detected two times during the submission process: Once JavaScript is the service side. Server-side detection is always feasible and reliable. JavaScript detection is only useful when the user has JavaScript enabled, so why do you need JavaScript detection, since the server is always reliable and effective and has nothing to do with the browser that the user is using?
JavaScript detection is an effective complement to server-side detection because it can be tested once the data has been sent to the server side. This way the user doesn't have to use the back button to go back and change the content of the form, which can be cumbersome, and it's a hassle to find the wrong content. So JavaScript detection is more helpful than server-side detection for user experience.
So JavaScript is not a complete detection mechanism, but it is a good choice as a server-side complement and user-friendly. Therefore, I suggest using these two detection mechanisms, both to meet the user experience requirements and ensure the security of the program.
OnSubmit
When you use JavaScript to detect a form, the first thing is to create a onsubmit event handler. This program will run when the user submits the form. This program detects whether some fields are filled with values, whether those check boxes have been selected at least one, or what else you need to detect.
The code is as follows:

 code as follows:

<form action= "something.pl" onsubmit= "return Checkscript ()" >

Checkscript () is the name of the program. This code needs to return TRUE or false. If you return false, the form will not be committed, and the code will stop running, whether it returns true or false.
So the generated code is as follows:

 code 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 this, everything is OK,
So can submit the form
return true;
}

Of course, this code can be very complex to write, if you need to detect many form items or a large number of radio boxes. The basic idea is this: you traverse every element of the form that needs to be checked, return FALSE if you find an error, and then the code stops running and the form is not submitted.
When you find the error, you should remind the user. You can use a warning box, but most of the way today is to generate an error message and then add it behind the error entry.
Only in the last place you have checked all the elements and found no errors, then you return true and the form is submitted.
Methods and properties of a form
JavaScript has some built-in methods and properties for processing forms. Three of these are more important:
You can submit the form using the Submit () method. Submit the first form of the page you can write:

code as follows:

Document.forms[0].submit ()
Note that when a user submits a form using JavaScript, the event handler for the form does not work.
To reset the form, you can:
[Code] Document.forms[0].reset ()
I assume that without testing, if you use this method, resetting the form's event handler will not be performed.
Finally you can modify the form's action item:
[Code] document.forms[0].action = ' the_other_script.pl ';
This method is handy if the form needs to be submitted to another page in some cases.
accessing form elements
The validation of a form requires access to the elements of the form to know what the user is filling in. So first we need to access the form based on Level 0 dom. Generally this is written:
[Code] document.forms[number].elements[number]
When the page is loaded, JavaScript generates an forms array to store all the forms on the page. So the first form is forms[0], and the second one is forms[1] and so on.
JavaScript also stores each element of the form in an array. The first element is elements[0], and the second one is elements[1]. All the Input,select,textarea are an element.
Sometimes it's better to use the form and the name of the element. In HTML, you need to name each element, such as:
[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 access the elements in the following ways:
[Code] document.personal.name 2 document.personal.address 3 document.personal.city
The advantage of using name is that you can break all the elements in the page and the code will still run if you use an array. For example in the above example of the city's input box is document.forms[0].elements[2], but when you put him in the first time becomes a document.forms[0].element[0], then you have to change the code.
Detection of values
Of course, the most important thing is to find out the user's value or select the check box. Sometimes you also want to fill out some other information in the form.
The following snippets of code can help you access the elements in the form. All of this is to save the user input in the user_input variable. After that, you can check for validity.
Texts,textarea and Hidden fields
Very simple:
[code] User_input = Document.forms[0].text.value

Where text is the name of the TextBox or textarea or hidden field. The Value property gives the text of these elements and is then stored in the User_input.
Direct writing can also be:

 code as follows:

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

Select Boxes
This is also very simple:

 code as follows:

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

To change his selection, you must modify the SelectedIndex, for example:

 code as follows:

Document.forms[0].select.selectedindex = 2;

The third option is now selected.
The Old browser
In the old browser, select boxes has no value attribute, so:

 code as follows:

var selectbox = Document.forms[0].select;
User_input = Selectbox.options[selectbox.selectedindex].value

First, find the items that the user has selected. Document.forms[0].select.selectedindex gives the number of the selected item. JavaScript has created an array of options that contains all select boxes Options. So through this array you can know what the user chooses, and then store it in the user_input.
Checkboxes
Checkboxes There are some small differences. We already know his value, but we need to know if the user has chosen him. Checked attribute can tell us. He has true and false two values.
So:

 code as follows:

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

The checkbox is the name of the check box. If the check box is selected, we get the name (you can also choose to get the value) and pass it to User_input.
Select a check box to:

 code as follows:

Document.forms[0].checkbox.checked = True

Single selection box
Unfortunately, you can't just find out which one is selected. You can only find the item that has the Checked property true after traversal.

 code 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 set of radio boxes.
Note Document.forms[0].radios is an array that contains all the radio boxes, and loops detect whether the checked property is true. If so, pass a user_input.
Document.forms[0].radios.length returns the number of all the radio boxes.

 code 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: North Jade (TW: @rehawk)