JavaScript Learning 14: Form processing

What is a form?

In HTML, the form is represented by the <form> element, whereas in JavaScript, the form corresponds to the htmlformelement type. Htmlformelement inherits HtmlElement, so it has default properties for HTML elements and is unique to its own properties and methods.

There are many ways to get forms <form> objects, such as: document.getElementById ("form tag id"), document.getelementsbytagname (' tag name '), and so on.

Submit Form

When you get a page form object, consider how you want to submit the form data to the background. The usual way is to use the Submit event, his default behavior is to carry the data to jump to the specified page. We can block the default behavior of submit by using event objects. You can also use the Submit () method to customize the trigger submit event, which means that you do not have to click the Submit button to submit the action.

The biggest problem with submitting data is repeating the form. For a variety of reasons, when a data is submitted to the server, there will be a delay and so on for a long time no response, causing the user to continue to commit the operation, so that repeatedly submitted a lot of the same request, or caused an error, or this write many of the same information, and this is not what we want to see.

Solution, there are two simple: the first is to disable the click button immediately after the submission, the second is to submit, after the judgment, if it has been submitted, then cancel the subsequent submission of the form submission action.

Having learned the basics above, let's look at two commonly used form elements: text boxes and Selection boxes.

text Box script

In HTML, there are two ways to represent a text box: One is a single-line text box <input type= "text", and one is a multiline text box <textarea>. Although <input> has a literal value value of,<textarea>, we can get their values by value. As for the other properties and methods no longer repeat, see a more interesting thing, filter input.

In order for the text box to enter the specified character, we must validate the input character. One approach is to determine whether a character is legitimate, which is a post-commit operation. Then we can also restrict certain characters before committing, which is filter input. Look at the simple implementation of the next generation:

<span style= "FONT-SIZE:18PX;" >//shielded non-numeric key input addevent (TextField, ' keypress ', function (evt) {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 from the <select> and <option> elements, and in addition to some common properties and methods, the Htmlselectelement type provides the following properties and methods:

In the DOM, each <option> element has a Htmloptionelement object to access the data, which has some of the following properties:

The selection box has a single and multiple selection, and the SelectedIndex attribute is the easiest to use for radio. For multiple-choice requirements, it is simpler to use the selected attribute. This is the decision whether to select or not, the checked property is used for the selected button to get its value.

Code examples are no longer written, because relatively simple, are basic, we are interested in practicing can write code to achieve a single radio and multi-select function.

Summary:

JS form processing far more than these, such as forms inside the table, the page label and so on, are the elements of the form, especially the DataGrid control, it and the background of the data interaction is more important, we do a variety of management information system process, it is sure to use a lot of it, So there are a lot of things we need to know and learn deeply.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

JavaScript Learning 14: Form processing