Utilizzo dell'API JavaScript per i campi di sola lettura

Volete controllare i campi di sola lettura in WPForms usando JavaScript?
WPForms fornisce una serie di metodi JavaScript che consentono di bloccare, sbloccare e attivare i campi dei moduli direttamente sul frontend. Queste funzioni sono utili se si desidera aggiungere una logica personalizzata, ad esempio per disabilitare i campi dopo l'invio o per rendere alcuni campi di sola lettura in base alle azioni dell'utente.

Aggiunta di JavaScript personalizzato

Per utilizzare questi metodi, è necessario aggiungere uno snippet JavaScript personalizzato al proprio sito. Se non siete sicuri di come aggiungere codice personalizzato, consultate la nostra guida sull'aggiunta di JavaScript personalizzato per WPForms.

Assicuratevi che il codice venga eseguito dopo il caricamento di WPForms, avvolgendolo all'interno dell'elemento wpformsReady evento.

Metodi disponibili

I seguenti metodi sono disponibili all'interno della classe wpforms.field oggetto.

wpforms.field.lock( formId, fieldId )

Blocca un campo specifico in modo che gli utenti possano vederlo ma non modificarlo.

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

wpforms.field.unlock( formId, fieldId )

Rimuove lo stato di sola lettura da un campo specifico.

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

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

Alterna lo stato di sola lettura di un campo.

  • true - blocca il campo
  • false - sblocca il campo
  • 'auto' (predefinito) - commuta automaticamente in base allo stato corrente
// With explicit state
wpforms.field.toggle(123, 5, true);

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

wpforms.field.isLocked( formId, fieldId )

Verifica se un campo è attualmente bloccato. Restituisce un booleano.

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

wpforms.field.lockAll( formId )

Blocca tutti i campi di un modulo.

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

wpforms.field.unlockAll( formId )

Sblocca tutti i campi di un modulo.

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

wpforms.field.readOnlyClass

Restituisce il nome della classe CSS applicata quando un campo è di sola lettura.

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

Note

  • Sostituire 123 con l'ID del modulo e 5 con l'ID del campo che si desidera indirizzare.
  • Utilizzare sempre il wpformsReady per assicurarsi che i metodi siano disponibili.
  • Questi metodi funzionano solo sul frontend e non influiscono sul costruttore di moduli o sulle voci salvate.