Handling node properties through JS | Community
Skip to main content
A
Anji_k123
October 2, 2023
Solved

Handling node properties through JS

  • October 2, 2023
  • 1 reply
  • 762 views

I have a dialog with a dropdown of 2 options along with a checkbox and text field:

  • if I choose option1 in dropdown then checkbox will be checked and disabled and also text field will become mandatory.
  • if I choose option 2 from dropdown then the checkbox will be enabled and unchecked, text field will not be mandatory until the checkbox is checked.
  • So how can I implement this functionality
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by arunpatidar

Hi,

you need to change the event type from change to select

$('.dropdown', e.target).on('select', function () {

 

1 reply

EstebanBustamante
Community Advisor and Adobe Champion
EstebanBustamanteCommunity Advisor and Adobe Champion
Community Advisor and Adobe Champion
October 2, 2023

Hi, 

 

The only thing you need to understand is that if you dynamically add the attribute "disabled" to an HTML element, it will become disabled. Similarly, if you add the attribute "required" to an HTML element, it will become mandatory. That being said, all you need to do is create a JavaScript function that, upon a dropdown change, dynamically adds the "disabled" and "required" attributes to the desired element. Below are some resources for understanding how to write such scripts. These are references, but I encourage you to develop your own solution.

 

1. How to handle the dropdown validation: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-handle-the-coral-ui-3-select-drop-down-change-event-in/m-p/368416 

2. Dialog validation: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/best-practice-to-handle-touch-ui-dialog-field-validation/td-p/415618 

 

Hope this helps 

Esteban Bustamante
    A
    Anji_k123Author
    October 2, 2023

    Hi, I have written below code but I didn't find any changes after changing dropdown options, any issue with the code?
    .dropdown,.checkbox and .txtfield are the field names

    (function (document, $, Coral) { $document.on('foundation-contentloaded', function(e) { function updateFields() { var $dropdown = $('.dropdown'); var $checkbox = $('.checkbox'); var $textField = $('.txtfield'); if ($dropdown.val() === 'rd-btn') { $checkbox.prop('checked', true); $checkbox.prop('disabled', true); $textField.prop('required', true); } else if ($dropdown.val() === 'dr-btn') { $checkbox.prop('checked', false); $checkbox.prop('disabled', false); $textField.prop('required', $checkbox.is(':checked')); } } updateFields(); $('.dropdown', e.target).on('change', function () { updateFields(); }); $('.checkbox', e.target).on('change', function () { var $textField = $('.txtfield'); $textField.prop('required', $(this).is(':checked')); }); }); })(document, Granite.$, Coral);

     

      arunpatidar
      Community Advisor
      arunpatidarCommunity AdvisorAccepted solution
      Community Advisor
      October 3, 2023

      Hi,

      you need to change the event type from change to select

      $('.dropdown', e.target).on('select', function () {

       

      Arun Patidar
        Terms & ConditionsAccessibility statement

        Loading footer...