Reset form after submission without page reload

Martin Dam

Vote:

Hi,

I am looking for a way to reset my form after submission, so the users can fill it out and submit it again. Is there a standard episerver method I can call to do this or do I need to write my own method that can reset all classes on the form elements, so it is visible again?

I am using EPiServer.Forms v4.9.1

#187544

Jan 25, 2018 14:25

Dac Thach Nguyen

Vote:

There no public method to reset form after submission. You need to write your own one to show the form again.

#187555

Jan 26, 2018 3:47

Martin Dam

Vote:

Hi Dac, thank you for your reply.

I have identified two elements that needs to be updated after submitting:

.Form__Status__Message
Need to remove all css classes and add back .Form__Status__Message and .hide

Form__MainBody

Needs to remove the style attribute (alternatively just remove the display style)

Do you see any other areas that should be updated as well, or any potential issues in resetting the form like this?

#187566

Jan 26, 2018 16:40

James Wilkinson - Nov 21, 2019 12:45

@Martin, you wouldn't happen to have a coding example of how you managed to achieve this by any chance would you? :)

Dac Thach Nguyen

Vote:

Hi,

If your form is sinlge step, I think it is ok. But if you implment progressive submit (multi step in multi page), you also should care about cookies.

#187576

Jan 29, 2018 8:37

James Wilkinson - Nov 25, 2019 18:17

Any cookies in particular? I've tried clearing all the custom EpiForm_ and the ASP.Net session cookie which seems to be generated by episerver forms - however this still prevents the next step button from working

Martin Dam

Vote:

@Jay Wilkinson this is the javascript code we ended up with:

resetForm(formContainer) {
if (formContainer) {
var formStatusMessage = formContainer.querySelector(".Form__Status__Message");
var formMainBody = formContainer.querySelector(".Form__MainBody");
var inputFields = formContainer.querySelectorAll(".ValidationSuccess");

if (formStatusMessage) {
this.clearClasses(formStatusMessage);
formStatusMessage.classList.add("Form__Status__Message", "hide");
}

if (formMainBody) {
formMainBody.removeAttribute("style");
}

if (inputFields) {
for (var i = 0; i < inputFields.length; ++i) {
inputFields[i].classList.remove("ValidationSuccess");
}
}
}
}

clearClasses(element) {
var cl = element.classList;
for (var i = cl.length; i > 0; i--) {
cl.remove( cl[0] );
}
}

#210415

Edited, Nov 22, 2019 8:44

James Wilkinson - Nov 25, 2019 18:17

Thanks Martin - I've extended it to support forms with multi steps, however it still leaves the "next" button in a broken state once the form has been submitted once already.