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>
@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
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.
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.
A few things here:
please let me know if this helps