Basic Form (Hide Original Buttons) and Use Custom Submit Button

[GWham1]

Since using the Power pages, I have always felt a little restricted with entity form (basic form) buttons. I sometimes want other buttons (e.g. a back button) or want them to appear in a different position on the page. I have therefore always added custom HTML buttons to my web template and hidden the out-of-the-box ones using CSS. On my custom HTML button, I have been using JS to 'click' the original hidden button behind the scenes, which seems and feels a little dirty to me. Yes, it works - but there must be a better way 🙄 

In my example below, I want to show a loading <div> on click of my custom button. If the validation passes, a loading <div> should appear (let's keep it simple) and perform as per the normal button action, e.g. validate and move to the next page. If validation fails, it just shows the form validation errors as normal.

The below all works fine, but it does seem a little nasty, in that the validation is being performed twice, and it just seems like a bit of a hack? I can't be the only person who has done some madness like this. How would you all approach this? There must be a better way, surely!

{% entityform name:'BasicFormExample' %}
<div class="btn-block">
     <a href="#" id="btnBack" class="btn btn-primary">Back</a>
     <a href="#" id="btnContinue" class="btn btn-primary" onclick="">Continue</a>
</div>

<script type="text/javascript">
     $(document).ready(function() {
          $("#btnContinue").click(function() {
               if(Page_ClientValidate()){
                    $("#load").css('display', 'flex');
                    $("#UpdateButton").click();
               }
          });
     });
</script>

[OliverRodrigues · Accepted solution]

A few things here:

• I wouldn't create a custom button to call the original one
• instead consider:
  • moving the place of the button using CSS
  • moving via JS by using a "control-x / control-v" approach, basically reading the original button, then appending to wherever you want it and removing the original one entirely
• if you want a "back button", I would consider Multistep Form component for this
• for the loading button, it seems that you are missing to set the display back to none in case there is an issue with the form validation, make sure to add that to evert part of the code that it might fallback to
• you can still inject the loading to the original button via JS/jQuery, this shouldn't be an issue

please let me know if this helps 

[GWham1]

Thanks, I will have a play around and see if I can find a solution from the above which gives me the flexibility i want.

[Fubar]

As per Oliver's response, only time I may say to hide the out of the box button and use yours with a click on the hidden out of the box one is if there is something else you need to do client side that you can't add in elsewhere. Also, your advanced settings on the buttons give your rough layout top vs bottom of the form (in the Portal/Power Pages Management App).

In the past we have had a customer insist on having a "Back" button on a Web Page with a basic form and in this case we appended a button to the button container and looked at the breadcrumb for the url to use. 

[GWham1]

@FubarThanks for taking the time to respond 👍 Sounds like we are all doing similar things in a round about way. I've done the same with the back buttons also