How to use ajax to operate a form with JavaScript-JS Tutorial-php.cn

This time I will bring youJavaScriptHow to use ajax to operate the form, what are theprecautionsfor using ajax to operate the form with JavaScript, the following is a practical case, let's take a look.

Using JavaScript to operate forms is similar to operating DOM, because the form itself is also a DOM tree.

However, the input box, drop-down box, etc. of the form can receive user input, so using JavaScript to operate the form can obtain the content entered by the user, or set new content for an input box.

The input controls of HTML formmainly include the following types:

Text box , the correspondingis used to enter text;
Password box, the correspondingis used to Enter the password;
The radio button, corresponding, is used to select one item;
Check box, corresponding, used to select multiple items;
Drop-down box, corresponding < ;select>, used to select an item;
Hidden text, corresponding, is not visible to the user, but will be hidden when the form is submitted Text is sent to the server.

##Get the value

If we get a reference to an node, we can call value directly Get the corresponding user input value:

//  var input = document.getElementById('email'); input.value; // '用户输入的值'

Copy after login

This method can be applied to text, password, hidden and select. However, for radio buttons and check boxes, the value attribute always returns the preset value of HTML, and what we need to get is actually whether the user has "checked" the option, so we should use checked to judge:

//  Monday //  Tuesday var mon = document.getElementById('monday'); var tue = document.getElementById('tuesday'); mon.value; // '1' tue.value; // '2' mon.checked; // true或者false tue.checked; // true或者false

Copy after login

Set the value

Setting the value is similar to getting the value. For text, password, hidden and select, just set the value directly:

//  var input = document.getElementById('email'); input.value = 'test@example.com'; // 文本框的内容已更新

Copy after login

For radio buttons and check boxes, just set checked to true or false.

HTML5 controls

HTML5 has added a large number of standard controls, commonly used ones include date, datetime, datetime-local, color, etc., they all Use the tag:

Copy after login

Browsers that do not support HTML5 cannot recognize the new controls and will display them as type="text". Browsers that support HTML5 will get the formatted string. For example, the value of an input of type="date" is guaranteed to be a valid date in YYYY-MM-DD format, or an empty string.

Submit the form

Finally, JavaScript can handle form submission in two ways (the AJAX method will be introduced later).

Method one is to submit a form through the submit() method of the

Copy after login