Using the JavaScript API for Read-Only Fields

Markdownを表示

WPFormsの読み取り専用フィールドをJavaScriptで制御しますか？
WPFormsでは、フロントエンドで直接フォームフィールドをロック、アンロック、トグルできるJavaScriptメソッドを提供しています。これらの機能は、送信後にフィールドを無効にする、またはユーザーのアクションに基づいて特定のフィールドを読み取り専用にするなどのカスタムロジックを追加したい場合に役立ちます。

カスタムJavaScriptの追加

これらのメソッドを使用するには、サイトにカスタムJavaScriptスニペットを追加する必要があります。カスタムコードの追加方法がわからない場合は、WPFormsのカスタムJavaScriptの追加に関するガイドを参照してください。

コードがWPFormsのロード後に実行されるように、wpformsReadyイベント内にラップしてください。

利用可能なメソッド

以下のメソッドはwpforms.fieldオブジェクト内で利用可能です。

`wpforms.field.lock( formId, fieldId )`

特定のフィールドをロックし、ユーザーは表示できますが編集できなくなります。

jQuery(document).on('wpformsReady', function() {
    wpforms.field.lock(123, 5);
});

`wpforms.field.unlock( formId, fieldId )`

特定のフィールドから読み取り専用の状態を削除します。

jQuery(document).on('wpformsReady', function() {
    wpforms.field.unlock(123, 5);
});

`wpforms.field.toggle( formId, fieldId, state )`

フィールドの読み取り専用の状態を切り替えます。

true — フィールドをロックする
false — フィールドをアンロックする
‘auto’ (デフォルト) — 現在の状態に応じて自動的に切り替える

// With explicit state
wpforms.field.toggle(123, 5, true);

// With default behavior ('auto')
wpforms.field.toggle(123, 5);

`wpforms.field.isLocked( formId, fieldId )`

フィールドが現在ロックされているかを確認します。ブール値を返します。

jQuery(document).on('wpformsReady', function() {
    if ( wpforms.field.isLocked(123, 5) ) {
        console.log('Field is locked');
    }
});

`wpforms.field.lockAll( formId )`

フォーム内のすべてのフィールドをロックします。

jQuery(document).on('wpformsReady', function() {
    wpforms.field.lockAll(123);
});

`wpforms.field.unlockAll( formId )`

フォーム内のすべてのフィールドをアンロックします。

jQuery(document).on('wpformsReady', function() {
    wpforms.field.unlockAll(123);
});

`wpforms.field.readOnlyClass`

フィールドが読み取り専用の場合に適用されるCSSクラス名を返します。

console.log( wpforms.field.readOnlyClass );
// 'wpforms-field-readonly'

注記

123をフォームIDに、5を対象とするフィールドIDに置き換えてください。
メソッドが利用可能であることを保証するために、常にwpformsReadyイベントを使用してください。
これらのメソッドはフロントエンドでのみ機能します。フォームビルダーや保存されたエントリーには影響しません。

読み取り専用フィールド用のJavaScript APIの使用

AI要約