JavaScript operation form _ dynamic node Java School, javascriptjava

JavaScript operation form _ dynamic node Java School, javascriptjava

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

However, the input box and drop-down box of a form can receive user input. Therefore, you can use JavaScript to operate the form to obtain user input content or set new content for an input box.

The following controls are used to input HTML forms:

• Text Box, corresponding to <input type = "text">, used to input text;
• <Input type = "password"> is used to enter the password;
• The corresponding <input type = "radio"> used to select an entry;
• The <input type = "checkbox"> check box, used to select multiple items;
• The select drop-down box corresponding to <select>, used to select an item;
• Hidden text. The corresponding <input type = "hidden"> is invisible to users, but the hidden text is sent to the server when the form is submitted.

Get value

If we obtain a reference of the <input> node, we can directly call value to obtain the corresponding user input value:

// <Input type = "text" id = "email"> var input = document. getElementById ('email '); input. value; // 'user input value'

This method can be applied to text, password, hidden, and select. However, for a single sequence and a check box, the value Attribute always returns the default value of HTML. What we need to obtain is whether the user has checked the option. Therefore, we should use checked to determine whether:

// <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 or falsetue. checked; // true or false

Set Value

The set value is similar to the obtained value. For text, password, hidden, and select, you can directly set the value:

// <Input type = "text" id = "email"> var input = document. getElementById ('email '); input. value = 'test @ example.com '; // the content of the text box has been updated.

Set checked to true or false for single-Statement and check boxes.

HTML5 controls

A large number of standard controls are added to HTML5. Commonly Used controls include date, datetime, datetime-local, and color. They all use the <input> label:

<input type="date" value="2015-07-01"><input type="datetime-local" value="2015-07-01T02:03:04"><input type="color" value="#ff0000">

Browsers that do not support HTML5 cannot recognize new controls and use them as type = "text" for display. HTML 5-enabled browsers can obtain formatted strings. For example, the input value of the type = "date" type is guaranteed to be a valid YYYY-MM-DD format date, or an empty string.

Submit Form

Finally, JavaScript can process form submission in two ways (AJAX is described later ).

The first method is to submit a form through the submit () method of the <form> element. For example, to respond to a <button> click Event, submit the form in JavaScript code:

<! -- HTML --> <form id = "test-form"> <input type = "text" name = "test"> <button type = "button" onclick = "doSubmitForm () "> Submit </button> </form> <script> function doSubmitForm () {var form = document. getElementById ('test-form'); // you can modify the input... // submit form: form. submit () ;}</script>

The disadvantage of this method is that it disrupts the normal submission of form by the browser. By default, the browser submits the form when you click <button type = "submit"> or press enter in the last input box. Therefore, the second method is to respond to the onsubmit event of <form> and modify the event when submitting the form:

<! -- HTML --> <form id = "test-form" onsubmit = "return checkForm () "> <input type =" text "name =" test "> <button type =" submit "> Submit </button> </form> <script> function checkForm () {var form = document. getElementById ('test-form'); // you can modify the input... // continue to the next step: return true;} </script>

Pay attention to return true to tell the browser to continue submission. If return false, the browser will not continue to submit the form. In this case, the user input is incorrect, prompting the user for an error message and terminating the submission of the form.

When checking and modifying <input>, you must make full use of <input type = "hidden"> to transmit data.

For example, many login forms require the user to enter the user name and password. For security reasons, when submitting the form, the plaintext password is not transmitted, but the MD5 of the password. Common JavaScript developers directly modify <input>:

<! -- HTML --> <form id = "login-form" method = "post" onsubmit = "return checkForm () "> <input type =" text "id =" username "name =" username "> <input type =" password "id =" password "name =" password "> <button type = "submit"> Submit </button> </form> <script> function checkForm () {var pwd = document. getElementById ('Password'); // convert the plaintext entered by the user to MD5: pwd. value = toMD5 (pwd. value); // continue to the next step: return true ;}</script>

It seems that there is no problem with this practice, but when the user enters the password for submission, the display of the password box will suddenly change from a few * to 32 * (because MD5 has 32 characters ).

To avoid changing user input, you can use <input type = "hidden">:

<! -- HTML --> <form id = "login-form" method = "post" onsubmit = "return checkForm () "> <input type =" text "id =" username "name =" username "> <input type =" password "id =" input-password "> <input type =" hidden "id =" md5-password "name =" password "> <button type =" submit "> Submit </button> </form> <script> function checkForm () {var input_pwd = document. getElementById ('input-password'); var md5_pwd = document. getElementById ('md5-password'); // convert the plaintext entered by the user to md5: md5_pwd.value = toMD5 (input_pwd.value); // proceed to the next step: return true;} </script>

Note that <input> marked name = "password" with id as md5-password, And the <input> with id as input-password does not have the name attribute. Data without the name attribute <input> will not be submitted.