javascript changes form value

In web development, forms (Forms) are usually used as a tool for users to submit data, and the page needs to use JavaScript to modify or control it. This article will introduce how to use JavaScript to change the value of a form, and provide some common practical application cases.

JavaScript method of changing form values

1. Use JavaScript DOM to set the value of form elements

DOM is a standard API for JavaScript to operate page elements, which can be used to access and Modify any element in the web page, including form elements. For elements such as text boxes, drop-down boxes, and check boxes in the form, you can change their values ​​by setting the value attribute of the elements.

For example, if you want to change the value of the name input box in the form to "Harry", you can use the following code:

document.getElementById("name").value = "Harry";

This code first selects the form element with the ID "name", Then set its value attribute to "Harry".

2. Use JavaScript Form API to modify the value of form elements

Form API is a higher-level encapsulation of form elements based on DOM. By accessing the Form object to handle form elements, you avoid using the id attribute to individually select form elements, making the code cleaner and easier to understand.

For example, if you want to set a form element named "user" to the selected state, you can use the following code:

document.forms['formName'].elements['user'].checked = true;

Here, we first select the form through the name attribute of the form , and then select a specific form element through the name attribute of the form element. Next, set the checked attribute of the element to true to select it.

Common application scenarios of form operations

1. Form automatic filling

In some cases, it may be necessary to automatically fill in certain elements in the form. For example, in the login page, if the user is already logged in, the default values ​​of the username and password controls need to be replaced with the user's login information.

const username = 'example_user';
const password = 'example_password';
document.getElementById('username').value = username;
document.getElementById('password').value = password;

2. Availability control of form elements

When a form contains multiple form elements, sometimes it is necessary to control the availability of other form elements based on the selection status of the current form element. For example, when you select an option, you might want to enable another drop-down list box or text input box.

const selectElement = document.getElementById('selectElement');
const textInput = document.getElementById('textInput');
const dropDown = document.getElementById('dropDown');

selectElement.addEventListener('click', () => {
    if (selectElement.value === 'large') {
        textInput.disabled = true;
        dropDown.disabled = false;
    } else if (selectElement.value === 'small') {
        textInput.disabled = false;
        dropDown.disabled = true;
    } else {
        textInput.disabled = true;
        dropDown.disabled = true;
    }
});

In this example, we use event listening to capture the click event of the drop-down list box. Then, set the availability of the text input box and drop-down list box based on the value of the option.

3. Form reset

When the user needs to refill the form, all elements of the form may need to be reset. In this example, we added a "reset" button to all text input boxes and drop-down list boxes in the form, and directly called the form's reset() method.

<form id="myForm">
    <label for="fname">First Name:</label>
    <input type="text" id="fname" name="fname"><br><br>

    <label for="lname">Last Name:</label>
    <input type="text" id="lname" name="lname"><br><br>

    <select id="gender" name="gender">
        <option value="male">Male</option>
        <option value="female">Female</option>
    </select><br><br>

    <button type="reset" onclick="document.getElementById('myForm').reset()">Reset</button>
</form>

The above is the method of changing form values ​​in JavaScript and its related application scenarios. Of course, these are only part of the js modification form, and more detailed processing methods must be handled according to the needs of development.

The above is the detailed content of javascript changes form value. For more information, please follow other related articles on the PHP Chinese website!