Documentation / Tutorials / Tutorials & How to’s
How to use Ladda on form submit with Awesome Studio
/ Tutorials & How to’s / How to use Ladda on form submit with Awesome Studio
By default awesome studio shows us the default loader on a form submits, but if you want you can use Ladda Js library to show the loaded instead of default loader on a form submit.
Just check the sample below on how to do it.
<form enctype="multipart/form-data" role="wppb-register-user" action=""> <input class="form-control text-input" name="user_first" maxlength="70" id="user_first" placeholder="First Name*" type="text" required> <input class="form-control text-input" name="user_last" maxlength="70" id="user_last" placeholder="Last Name*" type="text" required> <button type="submit" id="register" class="submit btn ladda-button js-register brand-white pad-x-6" name="register" value="Register"> Register </button> <!-- .form-submit --> <div class="errormsg"></div> </form> <script type=spa/axn axn='form.ajax' bind='submit' bind_selector="form[role='wppb-register-user']" route_ajax='abc-xyz-register-xyz' loader='ladda' loader_selector='.js-register'> </script>
So, we basically needed to add these two attributes to the script tag
loader='ladda' to specify the loader library we want to use, if we remove this library, spa will default to original loader.
loader_selector='.js-register' to specify the target button which need to show the loader, in case of above example that is register button whose class is 'js-register'.