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>
