Gostaria de controlar campos somente leitura no WPForms usando JavaScript?
O WPForms fornece um conjunto de métodos JavaScript que permitem bloquear, desbloquear e alternar campos de formulário diretamente no frontend. Essas funções são úteis se você quiser adicionar lógica personalizada, como desativar campos após o envio ou tornar determinados campos somente leitura com base nas ações do usuário.
Adicionando seu JavaScript personalizado
Para usar esses métodos, é necessário adicionar um snippet de JavaScript personalizado ao seu site. Se não tiver certeza de como adicionar código personalizado, consulte nosso guia sobre como adicionar JavaScript personalizado para WPForms.
Certifique-se de que seu código seja executado após o carregamento do WPForms, envolvendo-o dentro do wpformsReady
evento.
Métodos disponíveis
Os seguintes métodos estão disponíveis dentro do wpforms.field
objeto.
wpforms.field.lock( formId, fieldId )
Bloqueia um campo específico para que os utilizadores o possam ver mas não o possam editar.
jQuery(document).on('wpformsReady', function() {
wpforms.field.lock(123, 5);
});
wpforms.field.unlock( formId, fieldId )
Remove o estado só de leitura de um campo específico.
jQuery(document).on('wpformsReady', function() {
wpforms.field.unlock(123, 5);
});
wpforms.field.toggle( formId, fieldId, state )
Alterna o estado só de leitura de um campo.
- verdadeiro - bloqueia o campo
- false - desbloquear o campo
- 'auto' (predefinição) - mudar automaticamente consoante o estado atual
// 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 um campo está atualmente bloqueado. Retorna um booleano.
jQuery(document).on('wpformsReady', function() {
if ( wpforms.field.isLocked(123, 5) ) {
console.log('Field is locked');
}
});
wpforms.field.lockAll( formId )
Bloqueia todos os campos de um formulário.
jQuery(document).on('wpformsReady', function() {
wpforms.field.lockAll(123);
});
wpforms.field.unlockAll( formId )
Desbloqueia todos os campos de um formulário.
jQuery(document).on('wpformsReady', function() {
wpforms.field.unlockAll(123);
});
wpforms.field.readOnlyClass
Devolve o nome da classe CSS aplicada quando um campo é só de leitura.
console.log( wpforms.field.readOnlyClass );
// 'wpforms-field-readonly'
Notas
- Substituir
123
com o seu ID de formulário e5
com o ID do campo que pretende visar. - Utilizar sempre o
wpformsReady
para garantir que os métodos estão disponíveis. - Estes métodos funcionam apenas no frontend - não afectam o construtor de formulários nem as entradas guardadas.