Cornerstone Form where two Text elements are being updated through AJAX Change Selectors

[TIrvine]

I’m trying to have a calculator on my form, and a way to submit my clients’ selections to my email…and it works, except as soon as I press SUBMIT BUTTON, the page doesn’t show the success message. I’ve tried for days to troubleshoot with chatGPT. Also, sometimes the "number of files to be created: " shows a zero, but often works otherwise. Hopefully these are just bugs that can be worked out…? For reference, here is the page: https://bluemonster.ca/logo-clean-up/ <-- The only caveat with showing you is I’ve had to hide my other form fields (name/email and an agreement checkbox) and the submit button because I need to get this working for clients to use. Here is what chatGPT told me to write to you:

The form has AJAX and Auto Send Changes enabled, with these Change Selectors:

#logo-price-display
#logo-file-count-display

Both are ordinary Text elements.

The Price element updates correctly.

The Files element does not consistently update in the browser, even though the AJAX response itself contains the correct calculated value.

For example, with 1 logo variation and 2 colourways:

• The AJAX request payload contains logo_variations = 350 and colourways = 2 .
• The server response contains Price (before tax): $450 .
• The same server response contains Number of files to be created: 8 .
• The Price element updates visibly to $450.
• The Files element can remain at 0 in the browser.

The Files element is correctly registered as a Change Selector:

#logo-file-count-display

The form submits successfully when completed, and the pricing calculation itself is working.

There is also an interaction with the required Name, Email and Agreement fields: when those fields are empty, the Files display can remain at 0 even though the Price continues to calculate and the AJAX response contains the correct Files value.

I’ve already tested the form conditions, Success element, Change Selectors, Auto Send Changes, Reset On Submit, and the element visibility, so I’m trying to avoid changing the working calculator further.

Could you please let me know whether this is a known Cornerstone Forms AJAX/change-selector issue, or whether there is a recommended way to have a dynamically rendered Text element reliably update from an AJAX response before the form is submitted?

Thanks!

[ruenel]

Hello Tina,

Thank you for the detailed write-up. I understand the AJAX calculator on your Logo Clean-Up form has two problems: the success message does not appear after submission, and the “Number of files” Text element sometimes stays at 0 even though the AJAX response contains the correct value. Please review the steps below to resolve this.

• Add the success message to your Change Selectors – When Change Selectors are set, Cornerstone Forms takes only those selectors from the AJAX response and ignores the rest of it. Your form currently registers only #logo-price-display and #logo-file-count-display. The server renders the success message, but it is never placed on the page. Please give the element that holds your success message a unique ID (for example logo-form-result) and add #logo-form-result to the form’s Change Selectors. The same applies to anything shown or hidden by conditions, such as the Name, Email and agreement fields. Those elements must also sit inside a registered selector to update without a page reload.

• Update both values through one selector – Each Change Selector is replaced separately, in the order listed. If a response does not contain #logo-file-count-display (for example, because a condition hides it in that state), the update stops at that point. The price has already changed, but the file count keeps its old value. Please place both Text elements inside a single Column or Div and give that container a unique ID (for example logo-calculator-results). Then replace your two Change Selectors with #logo-calculator-results. Both values will then update together from the same response. Please also confirm the ID appears only once on the page, including in elements hidden at other breakpoints.

• Test with debug logging enabled – Open the page with ?__cs_debug added to the URL (https://bluemonster.ca/logo-clean-up/?__cs_debug) and open the browser console. Change one option at a time, and wait for the “Replaced Body with selectors” message before you make the next change. A change made while a request is still in progress is not sent, so the last selection may never be recalculated. Please note any “This ajax selector is not found on the page” warning, or any error that mentions outerHTML.

We would be happy to double check your site if we can log in. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[TIrvine]

Hi @ruenel! Thank you so much for your help with this!

I’ve worked through the Change Selector recommendations and have some additional information.

I changed the calculator so that the Price and Files elements are contained in one column with the ID logo-calculator-results , and the form’s only Change Selector is now #logo-calculator-results . This fixed the calculator — the price and file count now update correctly without requiring the Name, Email and Agreement fields to be completed first.

I also gave the success message/row its own IDs ( logo-form-result and logo-form-success ) and tested the Submitted Without Errors → Yes condition. The success message still does not appear after the actual form submission.

As another test, I moved the success row inside the form and ultimately placed it within the logo-calculator-results column. Interestingly, once it was inside the AJAX-updated area, the success message would sometimes appear before the Submit button was clicked , such as when I checked the Agreement checkbox. So the condition appears to be getting evaluated during the Auto Send Changes AJAX requests rather than only after the final form submission.

I’m also now seeing the form validate/scroll to the required Name and Email fields while I’m still making selections in the calculator. For example, selecting Colourways causes the form to move to the Variations section; after selecting a Variation it moves toward the White Logo selections, while Name/Email may become highlighted as required. It can then scroll back toward the unfinished selections.

The actual submission itself is working — I receive the submission email successfully.

I also tested with Ignore Errors OFF , but that did not resolve the success-message issue.

At this point, I think the combination of AJAX + Auto Send Changes + required fields + the Submitted Without Errors condition may be the source of the behaviour.

I think it would be helpful if you could please take a look directly at the form and its configuration. I’d rather not make further structural changes without knowing how Cornerstone Forms is intended to handle this combination.

The form is on:

Logo Clean-up - Blue Monster Creative

I’ll add my info to provide temporary access. Thanks again!! I appreciate it!! (ps-page is live - I’ve already sent a link to a client)

[ruenel]

Hello Tina,

Make sure to name the fields properly:

Your checkbox should be at least something like this:

This should make sure that when you submit, the form is submitted successfully, which would then trigger the condition, Submitted Without Errors → Yes.

Kindly let us know how it goes.

[TIrvine]

Thank you, @ruenel, I have them named now. I received my test submission in my email; however, unfortunately, naming those items didn’t trigger the success message.

Also, the form is still being very finicky. Sometimes it calculates after selecting the first two options (1 & 2 are required), as it should. However, sometimes “number of files” remains 0. And sometimes I have to fill in my name and email (and sometimes checkbox) for the calculator to be triggered.

[christian]

Hey Tina,

1. To show the success message, you must either leave Change Selectors empty (which refreshes the whole page via AJAX) or target the Form itself / common container in the Change Selectors list.

2. The form being finicky is likely because if Auto Send Changes, this must be disabled. This feature is mainly used for faceted search and not regular forms.

I tested what I mentioned above and it works.

[TIrvine]

Thanks @christian. I’ve deleted the change selector. Here’s what happens:

The calculator moves super slow. Before it calculates, the Name and Email fields turn red, and the checkbox field shows the “required” notice. This is a problem because I need it to calculate first, before a viewer decides to fill out their name/email/checkbox.

1. Is there a way to not have those (name/email/checkbox) trigged until someone hits the submit button?
2. I still did not see the success message with only the change selector removed.

With both the change selector removed AND the auto send changes OFF, the success message works, but the calculator doesn’t work at all until pressing the “submit” button. That doesn’t make sense for a user.

With those options removed, how can the calculator show the price to the user before wanting to fill out name/email/checkbox and pressing submit?

Thank you

[christian]

Hey @TIrvine,

@TIrvine

Is there a way to not have those (name/email/checkbox) trigged until someone hits the submit button?

You can hide the name/email/checkbox elements by setting up Cornerstone Forms Frontend Conditions. Please check the usage documentation below. Basically, you check if every other fields are filled first before the name/email/checkbox will show up.

Cornerstone Forms Conditions | Themeco Docs

[TIrvine]

@christian: Oooh, that might just work! I’ll have to give it a try. As long as the calculator can fire before the form is needed, that’s the key. Any idea why the calculations are so slow though?

[prakash_s]

Hello @TIrvine,

Please let us know how it goes. Regarding the slow calculation, it may be related to cached files. Could you please clear your browser cache, or test the page in an incognito/private browser window, and then check again?

Thanks