Hi Natallia, I cannot get your point about " stylize button during the form submission". Please elaborate so I can help you. Thank you.
Hi, everybody!
I believe that what Natallia is talking about is that there is a need to change a Submit button (after user clicks it) by adding an animation picture indicating that the submition data is being sent.
The style of submit button is changed by 'formsStartSubmitting' handler, but since the data is sent with AJAX async false mode, Chrome is blocked until the ajax call is done. Thus, the animation is not visible.
THACH, I was wondering, if there is any workaround to overcome this? Is there any possibility that in some coming version of the Forms the ajax call would become asynchronous?
@Igor
I cannot assure 100%, we cannot ship it hastily, If you send me your example (code with formsStartSubmitting), I try to change it before we ship Forms 3.
For changing default behaviour (async: false), It will consider configuration value in epi.EPiServer.Forms object.
In $(document).ready We call addActiveClass:
function addActiveClass() {
if (typeof $$epiforms !== 'undefined') {
$$epiforms(document).ready(function myfunction() {
$$epiforms(".EPiServerForms").on("formsStartSubmitting",
function () {
$(this).find(".FormSubmitButton").addClass("active");
});
$$epiforms(".EPiServerForms").on("formsSubmitted",
function () {
$(this).find(".FormSubmitButton").removeClass("active");
});
});
}
}
the 'active' class adds a 'spinner' image to Submit button:
...
background-image: url("../img/spinner.gif");
...
}
The image is rendered only in FireFox. Chrome is blocked and renders only after the ajax call completes.
I file Story AFORM-742 for it. It will be in Forms 3.0
In order to make Form use $.ajax() to submit form asynchronously, Developer can do either of this:
Otherwise, form submits SubmissionData to serverside synchronously (to prevent Visitor continuously hit submit button (by accident))
Thank you for your suggestion.
Thach lockevn.
Hi!
I want to stylize button during the form submission, but in chrome UI is not updated until the form is not sent.
Thanks!