Show/hide the submit button on submissionform

[Klekens]

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 ?

[CoopperBackpack]

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>

 

[telly]

Hi @Klekens,

To achieve this I use Conditional rules and CSS: https://c0dcv045.caspio.com/dp/aa4a60005b70f84f7961410e9ae9

For hiding the button:

1. 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>
2. 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:

1. Separate the fields and HTML block using Sections
2. User rule where it will hide the HTML block or the display where the Button is if the criteria met.

I hope this helps.

[telly]

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!

[chumkirebzi]

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!