count-number-of-characters.js

count-number-of-characters.js

  // Customize field IDs and offset
  const fieldIds = [1, 2, 3, 4];   // Text fields
  const targetFieldId = 5;         // Number field to hold total count.
  const offset = -1000;             // Offset value (Can be positive or negative)

  const getInputSelector = (id) => `#input_${GFFORMID}_${id}`;
  const targetSelector = getInputSelector(targetFieldId);

  function updateCharacterCount() {
    let total = 0;

    fieldIds.forEach((id) => {
      const field = document.querySelector(getInputSelector(id));
      if (field) {
        total += field.value.length;
      }
    });

    total += offset;

    const targetField = document.querySelector(targetSelector);
    if (targetField) {
      targetField.value = total;
      targetField.dispatchEvent(new Event('change'));
    }
  }

  fieldIds.forEach((id) => {
    const field = document.querySelector(getInputSelector(id));
    if (field) {
      field.addEventListener('input', updateCharacterCount);
    }
  });

  updateCharacterCount();