Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Select an option

  • Save annuman97/09b861ebfb71c8242b334f76a18c44f6 to your computer and use it in GitHub Desktop.

Select an option

Save annuman97/09b861ebfb71c8242b334f76a18c44f6 to your computer and use it in GitHub Desktop.
In Fluent Forms, Country Field display the Short Value for Dynamic Smartcode in HTML field. Using this JS will replace the Short Value and shows the full country name
(function() {
// Wait for the page and all forms to load (especially if loaded via AJAX)
function ready(fn) {
if (document.readyState != 'loading'){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
ready(function() {
// Use Fluent Forms class to find the country select and dynamic value span
function updateCountryText() {
var select = document.querySelector('select[name="country-list"]');
var span = document.querySelector('.ff_dynamic_value[data-ref="country-list"]');
if (!select || !span) return;
var code = select.value;
// Find the full country name using the <option>
var option = select.querySelector('option[value="' + code + '"]');
var name = (option && option.textContent) ? option.textContent : code;
span.textContent = name;
}
// On page load and when the dropdown changes
document.addEventListener('change', function(e) {
if (e.target && e.target.name === "country-list") {
updateCountryText();
}
});
// Update on page load (and after Fluent Forms renders, for AJAX forms)
setTimeout(updateCountryText, 300);
});
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment