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

JavaScriptを使用してWPFormsの読み取り専用フィールドを制御したいですか？
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を使用する