Handling node properties through JS

[Anji_k123]

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

[EstebanBustamante]

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... 

2. Dialog validation: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/best-practice-to-handle-to... 

Hope this helps 

[Anji_k123]

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 · Accepted solution]

Hi,

you need to change the event type from change to select

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