JavaScriptはフォームの値を変更します

Web 開発では、通常、ユーザーがデータを送信するためのツールとしてフォーム (フォーム) が使用され、ページは JavaScript を使用してそれを変更または制御する必要があります。この記事では、JavaScript を使用してフォームの値を変更する方法を紹介し、一般的な実際の応用例をいくつか示します。

JavaScript によるフォーム値の変更方法

1. JavaScript DOM を使用してフォーム要素の値を設定します

DOM は、JavaScript がページ要素を操作するための標準 API です。フォーム要素を含む、Web ページ内の任意の要素にアクセスして変更するために使用されます。フォーム内のテキストボックス、ドロップダウンボックス、チェックボックスなどの要素は、要素のvalue属性を設定することで値を変更できます。

たとえば、フォームの名前入力ボックスの値を「Harry」に変更する場合は、次のコードを使用できます。

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

このコードは、最初にフォーム要素を選択します。 ID が「name」の場合、その value 属性を「Harry」に設定します。

2. JavaScript フォーム API を使用してフォーム要素の値を変更する

フォーム API は、DOM に基づいてフォーム要素を高レベルでカプセル化したものです。 Form オブジェクトにアクセスしてフォーム要素を処理すると、id 属性を使用してフォーム要素を個別に選択する必要がなくなり、コードがすっきりして理解しやすくなります。

たとえば、「user」という名前のフォーム要素を選択状態に設定する場合は、次のコードを使用できます。

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

ここでは、最初に名前によってフォームを選択します。 form の属性を選択し、 form 要素の name 属性を通じて特定の form 要素を選択します。次に、要素の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はフォームの値を変更しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。