Dear community,

Sorry if I overlooked a post which already deals with this! I have the following structure on a HTML page:

1) I have some formfields (control questions) for which I define custom error messages with "def error_message(player: Player, values)".
2) I have some additional information in a div which is hidden by default (extra instructions/examples). Users can click on a "non-submit" ("type=button") button to reveal this information; the "non-submit" button is then hidden. All is done via JS.
3) The "normal" next-button is on the very end of the page.

When a user reveals the information (by clicking on the "non-submit" button), but the formfield validation fails when clicking on "Next", the page seems to "reset" in terms of appearance, i.e., the additional information is hidden again.

It seems that the normal "Next"-button (when formfield validation fails) resets the overall page to its initial stage. I could of course move the validation to JS instead of relying on oTree's built-in functionality. But is there some other way to change the "Next"-button's default behavior of changing the page's appearance back to its original state?

Many thanks in advance!

Best,
Julian

Clicking the next button does a full page load. So any local changes done with JS will be reset. You need to store that state somewhere outside of the page, either storing it in the browser session with sessionStorage or by storing it on the server a liveSend.

Thanks a lot for the very quick and informative reply! I could solve the problem with sessionStorage, based on your suggestion - thanks!