Add a copy of a FIELD to Results Container

Ask the Community Customization
1

Hello Team!

I’ve build a Calculator and it’ll be helpful for the user if I could “copy” the data from a dropdown FIELD to the Results Container.

I hope I was understood!

Thank you :smiling_face_with_sunglasses:

Field copy to Results Container
Field copy to Results Container825×769 89.4 KB

3

Hi there and welcome to the Community, @Dimitris_Selamsizogl :waving_hand:

Please try to add this code to the Custom JS field on the Settings tab of your widget’s settings and let me know if it worked :slightly_smiling_face:

const FIELD_ID = 'bae45c90-cdb4-4494-9560-7a1e010b5641';

function listener(selector, callback) {
  const firstTarget = document.querySelector(selector);
  if (firstTarget) {
    return callback(firstTarget);
  }

  const observer = new MutationObserver((_, observer) => {
    const targetNode = document.querySelector(selector);
    if (targetNode) {
      observer.disconnect();
      callback(targetNode);
    }
  });
  observer.observe(document.body, { childList: true, subtree: true });
}

listener(`[id="${FIELD_ID}"]`, (field) => {
  const resultContainer = field
    .closest('[class*="widget__Layout-sc"]')
    .querySelector('[class*="results__Container-sc"]');

  const title = resultContainer.firstChild;
  const caption = title.cloneNode(true);
  title.insertAdjacentElement('afterend', caption);

  function updateCaption(text) {
    caption.textContent = text;
  }
  updateCaption(field.textContent);

  const mutationObserver = new MutationObserver(([{ target }]) => {
    updateCaption(target.textContent);
  });
  mutationObserver.observe(field, {
    characterData: true,
    subtree: true
  });
});
4

Hi Max,

Thank you very much for your response. It’s working perfect!!!

Field copy to Results Container solved
Field copy to Results Container solved596×800 106 KB

5

Awesome, you’re always welcome :wink: