Uso de la API JavaScript para campos de sólo lectura

¿Le gustaría controlar los campos de sólo lectura en WPForms utilizando JavaScript?
WPForms proporciona un conjunto de métodos JavaScript que le permiten bloquear, desbloquear y alternar campos de formulario directamente en el frontend. Estas funciones son útiles si desea agregar lógica personalizada, como deshabilitar campos después del envío o hacer ciertos campos de sólo lectura basados en acciones del usuario.

Cómo añadir JavaScript personalizado

Para usar estos métodos, necesitará agregar un fragmento de código JavaScript personalizado a su sitio. Si no está seguro de cómo agregar código personalizado, consulte nuestra guía sobre cómo agregar JavaScript personalizado para WPForms.

Asegúrese de que su código se ejecuta después de WPForms ha cargado envolviéndolo dentro de la wpformsReady evento.

Métodos disponibles

Los siguientes métodos están disponibles dentro de wpforms.field objeto.

wpforms.field.lock( formId, fieldId )

Bloquea un campo específico para que los usuarios puedan verlo pero no editarlo.

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

wpforms.field.unlock( formId, fieldId )

Elimina el estado de sólo lectura de un campo específico.

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

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

Cambia el estado de sólo lectura de un campo.

  • true - bloquear el campo
  • false - desbloquear el campo
  • auto" (por defecto) - cambia automáticamente en función del estado actual
// With explicit state
wpforms.field.toggle(123, 5, true);

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

wpforms.field.isLocked( formId, fieldId )

Comprueba si un campo está bloqueado. Devuelve un booleano.

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

wpforms.field.lockAll( formId )

Bloquea todos los campos de un formulario.

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

wpforms.field.unlockAll( formId )

Desbloquea todos los campos de un formulario.

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

wpforms.field.readOnlyClass

Devuelve el nombre de la clase CSS aplicada cuando un campo es de sólo lectura.

console.log( wpforms.field.readOnlyClass );
// 'wpforms-campo-solo-lectura'

Notas

  • Sustituir 123 con su ID de formulario y 5 con el ID del campo al que desea apuntar.
  • Utilice siempre el wpformsReady para asegurarse de que los métodos están disponibles.
  • Estos métodos sólo funcionan en el frontend - no afectan al constructor de formularios ni a las entradas guardadas.