Is it possible to reload/reset a Sitecore Form without refreshing the entire page?

Question

I'm in the process of building a number of forms using Sitecore Forms in Sitecore 9.0. All of the forms will be displayed in a modal dialogue, and all forms will show a thank you message, using the approach discussed here:

http://www.apiqu.com/blog/2018/August/sitecore-9-forms-thank-you-message

On closure of the modal dialogue I would like to reset the form so that it can be used again.

I have tried a number of approaches but none of them work, including:

Adding a hidden previous (submit) button to the final page of the form (where it displays the thank you), and using JavaScript to the click that and then using a js timer to wait until the form loads and then resetting the form using js. However 2 things happened:

• The original data entered is what the form gets reset to.
• When submitting the form, it updates the original record in the forms db rather than creating a new one

Is there an ajax call or js method I can call to reload and reset the form?

N.B. Just to be clear; this question is not a js/jQuery question but is a Sitecore forms related question.

Any thoughts or help would be much appreciated.

Answer 1

On the modal close js code, simply use jQuery or js to reset the form. For example, if your form is enclosed in a div like this:

<div class="form-container">
    <form>...Sitecore Form....</form>
</div>

You could do this:

jQuery:

$(".form-container form").trigger("reset")

JavaScript:

document.getElementsByClassName("form-container")[0].getElementsByTagName("FORM")[0].reset()

Obviously, dependeing on your HTML structure, you'll probably want to change and clean that up a little. That is just for demonstration purposes.