Operating a form with JavaScript is similar to operating a DOM, because the form itself is also a DOM tree.

The input controls of HTML forms are mainly as follows:

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

Password box, corresponding to <input type="password">, for input password;

The radio box, corresponding to <input type="radio">, is used to select an item.

Check box, corresponding to <input type="checkbox">, for selecting multiple items;

The drop-down box, corresponding to <select>, is used to select an item.

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

Get value

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

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

This approach can be applied to text, password, hidden, and select. However, for radio boxes and check boxes, the value attribute always returns the HTML default value, and what we need to get is whether the user "checked" the option, so we should use checked to determine:

// <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 value

Setting values is similar to getting values. For text, password, hidden, and select, setting values directly is enough:

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

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

HTML5 controls

HTML5 adds a large number of standard controls, commonly used including date, datetime, datetime-local, color and so on. They all use the < input > tag.

Submit Form

One way is to submit a form through the submit() method of the < form > element, for example, by responding to a < button > click event and submitting 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 of form here.
    // Submit form:
    form.submit();
}
</script>

The disadvantage of this approach is that it disrupts the normal submission of form by browsers. By default, the browser submits the form when it clicks < button type= "submit", or the user presses the Enter key in the last input box. Therefore, the second way is to respond to the onsubmit event of <form> itself and make modifications 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 of form here.
    // Continue the next step:
    return true;
}
</script>

Note to return true to tell the browser to continue submitting, if return false, the browser will not continue submitting form, which usually corresponds to user input errors, prompting the user error information and terminating submitting form.

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

For example, many login forms want users to enter usernames and passwords, but for security reasons, MD5 with passwords is not transmitted when submitting forms. Ordinary JavaScript developers modify <input>: toMD5 directly

<!-- 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 user input plaintext to MD5:
    pwd.value = toMD5(pwd.value);
    // Continue the next step:
    return true;
}
</script>

This may not seem like a problem, but when a user enters a password and submits it, the display of the password box suddenly changes from a few to 32 (because MD5 has 32 characters).

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

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

Notice that the < input > with id of md5-password is marked with name="password", while the < input > with user input id of input-password has no name attribute. Data with <input> without name attribute will not be submitted.

Operation file