Klekens Posted June 3 Report Share Posted June 3 I have a submission form where i would like the submit button to only become visible if a field named user_id is filled in. I'm not that good with code, the only thing is have found out is to hide the submit button continously. So , maybe somebody can help me with this ? Quote Link to comment Share on other sites More sharing options...
CoopperBackpack Posted June 5 Report Share Posted June 5 Hello @Klekens, As far as I understood, the 'user_id' field is the input field that can be populated by the user manually. If this is correct, the Submit button should be hidden when the Submission form is loaded. Please add this code to the Footer section, and disable the HTML editor on the Advanced tab before pasting the code. <script> document.addEventListener('DataPageReady', hideButtonHandler); function hideButtonHandler() { const submitBtn = document.querySelector("form[action*='[@cbAppKey]'] .cbSubmitButtonContainer "); const userIdField = document.querySelector('#InsertRecorduser_id'); // user_id is the field name, replace it with the correct name is needed submitBtn.style.display = 'none'; userIdField.addEventListener('change', (event) => { if(event.target.value !== ''){ submitBtn.style.display = 'block'; } else if (event.target.value === ''){ submitBtn.style.display = 'none'; } }); document.removeEventListener('DataPageReady', hideButtonHandler); }; </script> Quote Link to comment Share on other sites More sharing options...
telly Posted June 6 Report Share Posted June 6 Hi @Klekens, To achieve this I use Conditional rules and CSS: https://c0dcv045.caspio.com/dp/aa4a60005b70f84f7961410e9ae9 For hiding the button: Hide the Button using this code(note that you need to put the code on the header of the DataPage): <style> .cbSubmitButtonContainer { display:none; } </style> Add HTML Block for the button and add this code: <input type="submit" name="Submit" id="Submit_2b06f709c0bc1f" value="Submit" class="cbSubmitButton"> For displaying and hiding of the custom button and display message: Separate the fields and HTML block using Sections User rule where it will hide the HTML block or the display where the Button is if the criteria met. I hope this helps. MVPofInnovation 1 Quote Link to comment Share on other sites More sharing options...
telly Posted June 6 Report Share Posted June 6 Hi @Klekens, Here additional resource for guidelines: - https://howto.caspio.com/datapages/datapage-components/html-blocks/ - https://howto.caspio.com/faq/caspio-bridge-8-4/inserting-code-in-html-blocks-and-header-footer/ - https://howto.caspio.com/datapages/forms/conditional-forms/ - https://howto.caspio.com/datapages/datapage-components/multi-column-and-sections/ I hope this guide you. cheers! Quote Link to comment Share on other sites More sharing options...
chumkirebzi Posted Wednesday at 10:37 PM Report Share Posted Wednesday at 10:37 PM Hi Everyone! I followed the guide of @telly and it worked perfectly! Sharing that I also added in an "!important" tag since I sometimes use a smaller screen and this will ensure that the normal submit button will not display when the page is resized, specifically when the "Responsive" option is enabled. <style> .cbSubmitButtonContainer { display:none !important; } </style> Good luck! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.