Overview
Este guia explica como configurar eventos personalizados de campos no ChronoForms 8 usando Triggers e Listeners. Ele percorre um exemplo prático de ocultar uma área de texto no carregamento da página e mostrá-la quando uma opção de rádio específica é selecionada. As instruções passo a passo abrangem a criação de triggers para eventos de carregamento da página e mudança de valor, e então a configuração de listeners para ocultar ou mostrar a área de texto conforme apropriado.
Às vezes, você precisa mostrar/ocultar/desabilitar/habilitar campos ou seções do seu formulário com base nos valores de outros campos do formulário. Aqui está como usar os comportamentos Triggers e Listeners para configurar eventos personalizados de campos no Chronoforms8.
No nosso exemplo, queremos ocultar uma área de texto por padrão quando o formulário é carregado, e mostrá-la se o usuário escolher a 2ª opção em um campo de rádio. Para isso, descobrimos que temos 2 eventos:
- Carregamento da Página, este será o primeiro evento trigger
- Mudança de Valor do campo de rádio, este será o 2º trigger
Vamos criar nosso primeiro trigger, aqui estão os passos:
- Abra o menu suspenso de comportamentos nas configurações da sua área de texto
- Habilite os "Events triggers"
- Adicione um novo trigger
- Certifique-se de que está configurado para "Document Ready", este evento é disparado sempre que a página é carregada
- Digite um nome para o trigger, neste caso escolhemos "hide_textarea"
Agora, um trigger chamado "hide_textarea" será disparado quando a página for carregada.
Então, precisamos configurar a área de texto para se ocultar quando esse trigger for disparado. Aqui está como fazer isso:
- Habilite "Events listeners" em comportamentos.
- Clique em Add Listener
- Defina o "On trigger of" para o nome do trigger que queremos escutar, neste caso "hide_textarea"
- Defina o "Action to do" para hide (ocultar)
Como nosso listener está na área de texto, isso ocultará a área de texto quando o trigger for executado, mas poderíamos escutar esse trigger em qualquer outro campo também.
Agora precisamos configurar um novo trigger para ser disparado quando o valor do nosso campo de rádio for definido para a 2ª opção. Aqui está como fazer isso:
- Abra as configurações do campo de Rádio e habilite o comportamento "Events triggers"
- Adicione um novo trigger
- Defina o "On" para "Value in"
- Defina os valores para "ck2", que é a 2ª opção do campo de rádio. Queremos que o trigger dispare quando esta opção for selecionada
- Vamos dar ao nosso trigger o nome "show_textarea"
Agora temos um novo trigger chamado "show_textarea" e este será disparado quando nossa 2ª opção de rádio for selecionada.
Só precisamos escutar este novo trigger na nossa área de texto para mostrar a área de texto quando ele for disparado.
Então, de volta às configurações da nossa área de texto, precisamos adicionar um novo listener:
- Adicionamos um novo listener
- Definimos o nome do trigger para "show_textarea"
- Definimos a "Action" para "show" (mostrar)
Agora, nossa área de texto será mostrada uma vez que a 2ª opção do campo de rádio for selecionada.
Comments:
How can I hide and show a container instead of a text area? The container doesn't have triggers, and I need to hide it when the form loads
Hi
You use another element's trigger and hide the container using a Listener in the container itself