Stylize form submit button.

Vote:
 

Hi!
I want to stylize button during the form submission, but in chrome UI is not updated until the form is not sent.
Thanks!

#149384
May 31, 2016 10:30
Vote:
 

Hi Natallia, I cannot get your point about " stylize button during the form submission". Please elaborate so I can help you. Thank you.

  • Default FormElement look and feel is contained in the EPiServerForms.css (embbed in the DLL). You can turn it off (go to Forms.config, set injectFormOwnStylesheet="false")
  • You can tweak and reuse the default stylesheet by modifying the EPiServerForms.less, and recompile to .css as you wish.
#150152
Jun 13, 2016 8:48
Vote:
 

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? 

#150160
Jun 13, 2016 10:39
Vote:
 

@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.

#150161
Jun 13, 2016 10:52
Vote:
 

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:

.submit.active {

    ...
background-image: url("../img/spinner.gif");

    ...

}

The image is rendered only in FireFox. Chrome is blocked and renders only after the ajax call completes.

#150164
Jun 13, 2016 11:14
Vote:
 

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:

  • set JavaScript object epi.EPiServer.Forms.AsyncSubmit to true
  • decorate the <form> tag with attribute data-epiforms-async-submit="true"

Otherwise, form submits SubmissionData to serverside synchronously (to prevent Visitor continuously hit submit button (by accident))

Thank you for your suggestion.

Thach lockevn.

#150385
Jun 17, 2016 6:10
Vote:
 

Thank you all for the help.

#150462
Jun 20, 2016 8:35
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.