Show /Hide a text field in AEM page based on the selection of radio button | Community
Skip to main content
L
Learning4me
Level 2
May 30, 2024

Show /Hide a text field in AEM page based on the selection of radio button

  • May 30, 2024
  • 2 replies
  • 1374 views

Hi Team,

Can we implement showing or hiding a text field based on radio button selection in AEM core component forms?

Core components Forms

AEMasCS

 

Thanks,

Roy

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

2 replies

EstebanBustamante
Community Advisor and Adobe Champion
EstebanBustamanteCommunity Advisor and Adobe Champion
Community Advisor and Adobe Champion
May 30, 2024

Hi,

 

You could achieve such behavior by using JavaScript, but it's not available out-of-the-box if that was your question.

 

Hope this helps

Esteban Bustamante
    HrishikeshKagne
    Community Advisor
    HrishikeshKagneCommunity Advisor
    Community Advisor
    June 2, 2024

    Hi @learning4me ,

    Yes, you can implement showing or hiding a text field based on the selection of a radio button in AEM Core Components Forms using the ClientLibs (JavaScript) for interactivity. Here’s a step-by-step guide on how to achieve this in AEM as a Cloud Service (AEMaaCS):

    Step-by-Step Implementation

    1. Create a Form with Radio Button and Text Field

    First, you need to create a form that includes a radio button and a text field.

    a. Create the Form Structure

    You can create a form structure in AEM using Core Components:

    1. Open your AEM instance and navigate to the page where you want to add the form.

    2. Drag and drop the "Form Container" component onto your page.

    3. Inside the Form Container, add a "Radio Button" component:

      • Configure the radio button options.
      • For simplicity, let's assume you have two options: "Show Text Field" and "Hide Text Field".

    4. Inside the Form Container, add a "Text Field" component:

      • Give it an appropriate name and field label.

    b. Example of Radio Button Configuration

    In the radio button component, you might configure the options as follows:

    • Option 1:
      • Text: Show Text Field
      • Value: show
    • Option 2:
      • Text: Hide Text Field
      • Value: hide

    2. Add ClientLibs for Show/Hide Logic

    You need to add a Client Library that contains JavaScript to handle the show/hide logic based on the radio button selection.

    a. Create a ClientLib

    Create a Client Library in your project (e.g., /apps/my-project/clientlibs):

    • Create a folder named clientlibs under /apps/my-project.
    • Under clientlibs, create a folder named form-show-hide.
    • Inside form-show-hide, create a file named form-show-hide.js.

    b. Write JavaScript to Handle Show/Hide Logic

    Add the following JavaScript code to form-show-hide.js:

     

    document.addEventListener('DOMContentLoaded', function() { // Get the radio button group and the text field const radioButtons = document.querySelectorAll('input[name="your-radio-button-name"]'); const textField = document.querySelector('input[name="your-text-field-name"]'); // Function to show or hide the text field based on the selected radio button value function toggleTextField() { const selectedValue = document.querySelector('input[name="your-radio-button-name"]:checked').value; if (selectedValue === 'show') { textField.closest('.cmp-form-text').style.display = 'block'; } else { textField.closest('.cmp-form-text').style.display = 'none'; } } // Add change event listeners to the radio buttons radioButtons.forEach(radioButton => { radioButton.addEventListener('change', toggleTextField); }); // Initialize the text field visibility based on the default selected radio button toggleTextField(); });

     

    Replace your-radio-button-name and your-text-field-name with the actual names of your radio button and text field.

    c. Add the ClientLib to the Page

    You need to include the Client Library in your page. This can be done by adding the following properties to your clientlibs/form-show-hide folder:

    • Create a file named cq:ClientLibraryFolder (nt
       
      ) under form-show-hide.
    • Add the following properties to the cq:ClientLibraryFolder node:
      • categories (String) with value [ "my-form-show-hide" ]
      • dependencies (String) with value [ "cq.authoring.dialog" ]

    Include this Client Library in your page template or component:

     

    <sly data-sly-use.clientLibs="${'com.adobe.granite.ui.library' @ categories='["my-form-show-hide"]'}"></sly>

     

    3. Deploy and Test

    • Deploy the changes to your AEM environment.
    • Open the page with the form and test the radio button functionality. The text field should show or hide based on the radio button selection.

     

    By following these steps, you can create a form in AEM that dynamically shows or hides a text field based on the selection of a radio button. This approach leverages AEM's ClientLibs and Core Components to enhance the interactivity of your forms.

    Hrishikesh Kagane
      S
      SaumyaSr2
      May 21, 2025

      can this be implemented for multifield also?

       

      Terms & ConditionsAccessibility statement

      Loading footer...