Hello Max,
I have a follow-up request regarding a second form I’ve created, the “Change Request” form. The Change Request form can be accessed here. I’d like a similar behaviour to what was previously implemented on my first form:
-
When a customer selects “Just one” or “Multiple” for “How many service addresses would you like to add?”, or selects “Change a service address” for “What changes would you like to make to your service address/addresses?”,
-
The submit button should change its text to “Get Your Free Quote” and, when clicked, open the following link in a new tab: https://k9poopertroopers.com.au/get-your-free-quote.
I have been working with ChatGPT to modify the original JS code for the first form to achieve this. The solution worked partially: the button text correctly changes based on the selections. However, the issue is that if a user clicks back, the button text reverts as expected, but the functionality does not revert. Instead, it continues to open the link in a new tab, rather than behaving like the original submit button.
Would you be able to assist me in fixing the code so that when users navigate back, the buttons not only show the correct text but also restore their original behaviour? The draft, partially working code is below:
const widgetSelector = ‘#eapps-form-builder-17536663-c388-4d9c-900b-ac172987f487’;
const triggerFields = [
{
label: ‘What changes would you like to make to your service address/addresses?’,
values: [‘Change a service address’]
},
{
label: ‘How many service addresses would you like to add?’,
values: [‘Just one’, ‘Multiple’]
}
];
const newButtonText = ‘Get Your Free Quote’;
const newButtonLink = ‘https://k9poopertroopers.com.au/get-your-free-quote’;
const originalTextMap = new WeakMap();
const patchedInputs = new WeakSet();
let buttonGlobalBound = false;
function patchStep(container) {
const buttonEl = container.querySelector(‘button[aria-label=“Submit Change Request”]’);
if (!buttonEl) return;
const buttonLabel = buttonEl.querySelector(‘[class*=“ButtonBase__Ellipsis-sc”]’);
if (!buttonLabel) return;
if (!originalTextMap.has(buttonEl)) {
originalTextMap.set(buttonEl, buttonLabel.textContent);
}
// Function to update button state
function updateButtonState() {
let showAlt = false;
triggerFields.forEach(fieldInfo => {
const field = […container.querySelectorAll(‘[class*=“FormFieldLayout__Container-sc”]’)]
.find(f => {
const labelEl = f.querySelector(‘[class*=“FormFieldLayout__Label-sc”]’);
return labelEl && labelEl.textContent.trim().toLowerCase()
.startsWith(fieldInfo.label.toLowerCase());
});
if (!field) return;
const inputs = [...field.querySelectorAll('input')].filter(i => fieldInfo.values.includes(i.value));
if (inputs.some(i => i.checked)) showAlt = true;
});
const getNewText = () => showAlt ? newButtonText : originalTextMap.get(buttonEl);
buttonLabel.textContent = getNewText();
buttonEl.dataset._altActive = showAlt ? "1" : "0";
}
// Attach listeners to inputs
triggerFields.forEach(fieldInfo => {
const field = […container.querySelectorAll(‘[class*=“FormFieldLayout__Container-sc”]’)]
.find(f => {
const labelEl = f.querySelector(‘[class*=“FormFieldLayout__Label-sc”]’);
return labelEl && labelEl.textContent.trim().toLowerCase()
.startsWith(fieldInfo.label.toLowerCase());
});
if (!field) return;
const inputs = [...field.querySelectorAll('input')].filter(i => fieldInfo.values.includes(i.value));
inputs.forEach(input => {
if (!patchedInputs.has(input)) {
patchedInputs.add(input);
input.addEventListener('click', () => setTimeout(updateButtonState, 0));
}
});
});
if (!buttonGlobalBound) {
buttonGlobalBound = true;
buttonEl.addEventListener(‘click’, (e) => {
if (buttonEl.dataset._altActive === “1”) {
e.preventDefault();
e.stopPropagation();
window.open(newButtonLink, ‘_blank’);
}
}, true);
}
updateButtonState();
}
const waitForWidget = setInterval(() => {
const container = document.querySelector(widgetSelector);
if (container) {
patchStep(container);
setInterval(() => patchStep(container), 300);
clearInterval(waitForWidget);
}
}, 300);
Thank you in advance for any assistance you or your team provides.
Update: I’ve just noticed that the JavaScript code on both of my forms is no longer working. Could there have been a recent update on your end that might have affected its functionality?
