Manipulating a form with JavaScript is similar to manipulating the DOM, because the form itself is also a DOM tree.

However, the input box and drop-down box 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 forms mainly include the following:

• Text box, corresponding to < input type = "text" >, used to input text;

• The password box, corresponding to < input type = "password" >, is used to enter the password;

• Radio box, corresponding to < input type = "radio" >, used to select an item;

• Check box, corresponding to < input type = "checkbox" >, used to select multiple items;

• Drop down box, corresponding to < Select >, used to select an item;

• Hidden text, corresponding to < input type = "hidden" >, is invisible to the user, but the hidden text will be sent to the server when the form is submitted.

Gets the value of the form

If we obtain a reference to 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 entered value'

This method can be applied to text, password, hidden and select. However, for radio boxes and check boxes, the value attribute always returns the default value of HTML, and what we need to get is 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 or false
tue.checked; // true or false

Set the value of the form

Setting the value is similar to obtaining the 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 contents of the text box have been updated

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

Submit form and verify

Pass the submit() method of the < form > element

!-- HTML -->
<form id="test-form">
    <input type="text" name="test">
    <button type="button" onclick="doSubmitForm()">Submit</button>
//Respond to a click event of < button >
</form>

<script>
function doSubmitForm() {
	//Validation of form submission
	if (confirm("Submit Form ?")) {
      return true;
    } else {
      return false;
    }
    var form = document.getElementById('test-form');
    // You can modify the input of the form here
    
    // Submit form:
    form.submit();
    //Submit the form in JavaScript code
}
</script>

The disadvantage is that it disrupts the normal submission of the form by the browser. By default, the browser submits the form when clicking < button type = "submit" > or the user presses enter in the last input box.

Respond to the onsubmit event of < form > itself

<!-- HTML -->
<form id="test-form" onsubmit="return checkForm()">
    <input type="text" name="test">
    <button type="submit">Submit</button>
</form>

<script>
function checkForm() {
	//Validation of form submission
	if (confirm("Submit Form ?")) {
      return true;
    } else {
      return false;
    }
    var form = document.getElementById('test-form');
    // You can modify the input of the form here
    // Continue to the next step:
    return true;
}
</script>

Note: return true to tell the browser to continue submitting. If return false, the browser will not continue submitting the form. This usually corresponds to an error in the user's input and terminates submitting the form after prompting the user with an error message.

Form encryption

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

For example, many login forms want the user to enter the user name and password. However, for security reasons, the MD5 of the password is not transmitted when submitting the form. Ordinary JavaScript developers will 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');
    // Change the plaintext entered by the user into MD5:
    pwd.value = toMD5(pwd.value);
    // Continue to the next step:
    return true;
}
</script>

This seems to be no problem, but when the user enters the password and submits, the display of the password box will suddenly change from several * to 32 * (because MD5 has 32 characters).

In order not to change the user's input, you can use < input type = "hidden" > to realize:

<!-- 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');
    // Change the plaintext entered by the user into MD5:
    md5_pwd.value = toMD5(input_pwd.value);
    // Continue to the next step:
    return true;
}
</script>

Note that < input > with id MD5 password is marked with name="password", while < input > with id input password entered by the user has no name attribute. Data of < input > without name attribute will not be submitted.