Home > Web Front-end > JS Tutorial > How to use ajax to operate a form with JavaScript

How to use ajax to operate a form with JavaScript

php中世界最好的语言
Release: 2018-03-31 13:40:28
Original
1858 people have browsed it

This time I will bring you JavaScriptHow to use ajax to operate the form, what are the precautions for 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 form mainly include the following types:

  • Text box , the corresponding is used to enter text;

  • Password box, the corresponding is 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:

// <input type="text" id="email">
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:

// <label><input type="radio" name="weekday" id="monday" value="1"> Monday</label>
// <label><input type="radio" name="weekday" id="tuesday" value="2"> Tuesday</label>
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:

// <input type="text" id="email">
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:

<input type="date" value="2015-07-01">
<input type="datetime-local" value="2015-07-01T02:03:04">
<input type="color" value="#ff0000">
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
element. For example, in response to a
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template