JavaScript Learning 14: Form processing __java

Source: Internet
Author: User

what are forms.

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

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

Submitting a 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, and his default behavior is to carry the data to the specified page. We can prevent the default behavior of submit through the event object. You can also use the Submit () method to customize the triggering of a 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 piece of data is submitted to the server, there will be delays and so on, causing the user to commit all the time, making repeated submissions of many of the same requests, or causing errors, or writing multiple identical messages, which are not what we want to see.

The solution, in simple terms, there are two: first, after the submission, immediately disable the click button, the second is submitted, to make a judgment, if submitted, then cancel the subsequent form submission submission operation.

With the basics above, let's look at two common form elements: text boxes and Selection boxes.

text Box Script

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

In order for the text box to enter the specified character, we must verify the characters entered. One approach is to determine whether a character is legitimate, which is done after the commit. Then we can also limit some characters before submitting, which is the 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>

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

Selection box has a radio and multiple choice of points, for radio, the use of SelectedIndex properties is the simplest. For multiple-selection requirements, it is simpler to use the selected attribute. This is the decision whether to select, and for the selected button to get its value, use the Checked property.

Code samples are no longer written, because the simpler, are basic, we are interested in the practice can write code to achieve a single radio and multiple selection function.

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.