javascript 改變form的值

在 Web 開發中，表單（Form）通常會作為使用者提交資料的工具，頁面需要使用 JavaScript 來修改或控制。本文將介紹如何使用 JavaScript 來改變表單的值，同時提供一些常見的實際應用案例。

JavaScript 改變表單值的方法

1.使用JavaScript DOM 設定表單元素的值

DOM 是JavaScript 作業頁面元素的標準API，可以透過它來存取和修改任何網頁中的元素，同時也包含表單元素。對於表單中的文字方塊、下拉方塊、複選框等元素，可以透過設定元素的 value 屬性來改變其值。

例如，如果要將表單中的名字輸入框的值改為"Harry"，可以使用以下程式碼：

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

此程式碼首先選取ID 為"name" 的表單元素，然後將其value 屬性設為"Harry"。

2.使用 JavaScript Form API 修改表單元素的值

Form API 是在 DOM 的基礎上，針對表單元素進行的較高層級的封裝。透過存取 Form 物件來處理表單元素，可以避免使用 id 屬性單獨選取表單元素，從而使程式碼更加簡潔且易於理解。

例如，如果要將一個名為"user" 的表單元素設為選取狀態，可以使用下列程式碼：

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

在這裡，我們首先透過表單的name 屬性來選取表單，然後透過表單元素的name 屬性來選取特定的表單元素。接著，將該元素的 checked 屬性設為 true，即可將其選取。

表單操作的常見應用場景

1.表單自動填入

在某些情況下，可能需要自動填入表單中的某些元素。例如，在登入頁面中，如果使用者已經登錄，則需要將使用者名稱和密碼控制項的預設值替換為使用者的登入資訊。

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

2.表單元素的可用性控制

當表單包含多個表單元素時，有時需要根據目前表單元素的選擇狀態來控制其他表單元素的可用性。例如，當選擇某一選項時，可能需要啟用另一個下拉列錶框或文字輸入框。

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;
    }
});

在此範例中，我們使用事件監聽來擷取下拉列錶框的點擊事件。隨後，根據選項的值來設定文字輸入框和下拉列錶框的可用性。

3.表單重設

當使用者需要重新填寫表單時，可能需要對表單所有元素進行重設。在此範例中，我們為表單中的所有文字輸入框和下拉列錶框新增了"重置"按鈕，並直接呼叫了表單的 reset() 方法。

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

以上便是 JavaScript 改變表單值的方法及其相關應用場景。當然，這些只是 js 修改表單的一部分，更細緻的處理方式還得根據開發中所需的方式來處理。

以上是javascript 改變form的值的詳細內容。更多資訊請關注PHP中文網其他相關文章！