Jump to content

Show/hide the submit button on submissionform

Recommended Posts

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 ?

Link to comment
Share on other sites

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.

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);


Link to comment
Share on other sites

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):
    .cbSubmitButtonContainer {
  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.

Link to comment
Share on other sites

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.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...