1. Capability Overview

JS scripts run once after the basic rendering of the smart form filling page is complete. The script runs in the user's browser and can use standard DOM APIs to operate page elements.

It can be used to:

• Find field DOM elements
• Modify text, styles, and visibility
• Listen to DOM events such as input, click, and selection
• Build simple interactions based on field values
• Listen to submit button clicks

2. CSP Security Policy

The smart form filling page configures the Content Security Policy through a meta tag:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-eval' https://webapi.amap.com; connect-src 'self' https://webapi.amap.com; img-src 'self' data: https:; style-src 'self' 'unsafe-inline';">

This policy mainly restricts the following:

• Default resources can only be loaded from the current site: default-src 'self'
• Scripts can only be loaded from the current site and Amap scripts: script-src 'self' 'unsafe-eval' https://webapi.amap.com
• Network requests can only be sent to the current site and Amap APIs: connect-src 'self' https://webapi.amap.com
• Images can use the current site, data: images, and HTTPS images: img-src 'self' data: https:
• Styles can use current-site styles and inline styles: style-src 'self' 'unsafe-inline'

Impact on user scripts:

• You can operate the current page DOM.
• You cannot use fetch, XMLHttpRequest, or similar methods to request unauthorized third-party APIs.
• You cannot load unauthorized third-party JS files.
• You can set inline styles, for example, element.style.display = 'none'.
• You can use HTTPS images or data: images.
• If the script triggers a CSP restriction, the browser blocks the corresponding behavior.

3. Execution Timing

The script runs after the basic form DOM is rendered.

If the target element is rendered asynchronously, such as address, location, attachment, or popup components, you can use a waiting function:

(function () {
  function waitFor(selector, callback, timeout) {
    var start = Date.now();
    var timer = setInterval(function () {
      var el = document.querySelector(selector);
      if (el) {
        clearInterval(timer);
        callback(el);
      } else if (Date.now() - start > (timeout || 5000)) {
        clearInterval(timer);
      }
    }, 100);
  }

  waitFor('[data-key="tel"] input', function (input) {
    input.placeholder = 'Enter a mobile number';
  });
})();

4. Field Selectors

The outer container of each field provides the following data-* attributes:

<div
  data-key="Field API Name"
  data-label="Field display name"
  data-type="Field type"
  data-required="true/false"
  data-readonly="true/false"
>
</div>

Recommended priority:

1. Recommended: [data-key="tel"]
2. Available: [data-type="text"], [data-required="true"]
3. Use with caution: [data-label="Name"], because field renaming or multilingual settings may affect it
4. Not recommended: relying on complex DOM hierarchy, for example, div > div > input

Example:

var telField = document.querySelector('[data-key="tel"]');
var telInput = telField && telField.querySelector('input');

5. Common Field Operations

Hide a field:

var company = document.querySelector('[data-key="company"]');
if (company) {
  company.style.display = 'none';
}

Modify the field title style:

var nameField = document.querySelector('[data-key="name"]');
if (nameField) {
  var label = nameField.querySelector('.input-label');
  if (label) {
    label.style.color = '#d93026';
  }
}

Listen to input:

var telInput = document.querySelector('[data-key="tel"] input');
if (telInput) {
  telInput.addEventListener('input', function () {
    console.log('Current mobile number:', telInput.value);
  });
}

Set an input value:

function setInputValue(input, value) {
  var descriptor = Object.getOwnPropertyDescriptor(input.__proto__, 'value');
  descriptor.set.call(input, value);
  input.dispatchEvent(new Event('input', { bubbles: true }));
  input.dispatchEvent(new Event('change', { bubbles: true }));
}

var nameInput = document.querySelector('[data-key="name"] input');
if (nameInput) {
  setInputValue(nameInput, 'John Smith');
}

6. Field Linkage Examples

Control whether the company field is displayed based on whether the phone field is filled:

(function () {
  var telInput = document.querySelector('[data-key="tel"] input');
  var companyField = document.querySelector('[data-key="company"]');

  if (!telInput || !companyField) {
    return;
  }

  function updateCompanyVisible() {
    companyField.style.display = telInput.value ? '' : 'none';
  }

  telInput.addEventListener('input', updateCompanyVisible);
  updateCompanyVisible();
})();

When the source field changes, update the sales lead detail prompt:

(function () {
  var sourceField = document.querySelector('[data-key="source"]');
  var remarkTextarea = document.querySelector('[data-key="remark"] textarea');

  if (!sourceField || !remarkTextarea) {
    return;
  }

  sourceField.addEventListener('click', function () {
    remarkTextarea.placeholder = 'Please add sales lead details';
  });
})();

7. Submit Buttons and Submit Events

The submit button can be found through name="button_submit":

var submitButton = document.querySelector('[name="button_submit"]');

The reset button can be found through name="button_reset":

var resetButton = document.querySelector('[name="button_reset"]');

Listen to submit button clicks:

var submitButton = document.querySelector('[name="button_submit"]');

if (submitButton) {
  submitButton.addEventListener('click', function () {
    console.log('The user clicked the submit button');
  });
}

The current filling page does not use a standard native <form> submission. If you need to perform lightweight checks before submission, listen to the submit button click event.

If you only need to record information or show prompts, do not call preventDefault() or stopPropagation(), so the system validation and submission flow are not affected.

Prompt before submission:

var submitButton = document.querySelector('[name="button_submit"]');

if (submitButton) {
  submitButton.addEventListener('click', function () {
    var telInput = document.querySelector('[data-key="tel"] input');
    if (telInput && telInput.value) {
      console.log('About to submit, mobile number:', telInput.value);
    }
  });
}

8. Notes

• Scripts should only operate the current form page DOM.
• Do not store accounts, passwords, or keys in scripts.
• Do not send customer input to unconfirmed third-party addresses.
• Do not load scripts from unknown sources.
• The DOM may change after page upgrades. Verify scripts in a test form before going live.
• Script errors do not block the basic form display, but the script that throws the error will not continue to take effect.