JavaScript learning 14: form processing, javascript14

JavaScript learning 14: form processing, javascript14

What is a form?

In HTML, the form is represented by the <form> element, while in JavaScript, the form corresponds to the HTMLFormElement type. HTMLFormElement inherits HTMLElement, so it has the default attributes of HTML elements and its own attributes and methods.

There are many methods to obtain the form <form> object, such as: document. getElementById ("form tag ID"), document. getElementsByTagName ('tagname'), and so on.

Submit Form

After obtaining the page form object, you must consider how to submit the form data to the background. The usual method is to use the submit event. Its default behavior is to carry data to jump to the specified page. We can block the default behavior of submit through the event object. You can also use the submit () method to customize the trigger submit event. That is to say, you do not have to click the submit button to submit the event.

The biggest problem with data submission is repeated forms. For various reasons, when a piece of data is submitted to the server, there may be a delay and no response for a long time. As a result, the user does not stop submitting, so that many identical requests are submitted repeatedly, or errors are caused, or multiple identical messages are written, which is not what we want to see.

There are two solutions: one is to disable the click button immediately after submission, and the other is to make judgments after submission. If you have already submitted the button, the subsequent form submission operations are canceled.

After learning the basic knowledge above, let's look at two common form elements: text box and selection box.

Text Box script

In HTML, there are two ways to express a text box: one is a single-line text box <input type = "text"> and the other is a multi-line text box <textarea>. Although <input> literally has value, <textarea> does not, we can obtain their value through value. As for other attributes and methods, we will not repeat them here. Let's take a look at something interesting and filter the input.

To enter the specified characters in the text box, we must verify the entered characters. One way is to determine whether the character is valid. This operation is performed after submission. We can also limit certain characters before submission, which is used to filter input. Let's look at the simple implementation of the next generation:

<Span style = "font-size: 18px;"> // mask the input addEvent (textField, 'keypress', function (evt) of a non-numeric key) {var e = evt | window. event; var charCode = getCharCode (evt); if (! /\ D/. test (String. fromCharCode (charCode) & charCode> 8) {preDet (evt) ;}}); </span>

Select box script

The selection box is created through the <select> and <option> elements. In addition to some common attributes and methods, the HTMLSelectElement type also provides the following attributes and methods:

In the DOM, each <option> element has an HTMLOptionElement object to access data. This object has the following attributes:

The selection box can be divided into single-choice and multi-choice. For Single-choice, using the selectedIndex attribute is the easiest. For multiple-choice requests, it is easier to use the selected attribute. This is to determine whether the selected button is selected. For how to obtain the value of the selected button, you must use the checked attribute.

Code examples are no longer written, because they are simple and basic. If you are interested in practice, you can write code to implement the single-choice and multi-choice functions.

Summary:

Javascript form processing is far more than this. For example, tables and page labels in a form are all form elements, especially the datagrid control. It is important to interact with data in the background, we must use it a lot in the Process of various management information systems. Therefore, there are many things that require us to understand and study in depth.

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.