Jump to content

Hide Submit Button and Display a Warning Message


Recommended Posts

I'm using a Submission Form Data Page to let my teachers Schedule A Class for their students. I have a calculated field for the number of classes left in the student's account. This field is a Virtual Field in the Data Page. I would like to Hide or Disable the Submit button and display a Warning Message when that field becomes zero.  Is there a way to do this without using JavaScript? If not, can someone please help me with JS because I don't have any experience using it. 

 

image.png.b41912f8a4b5d796b94453de93f6466a.png

image.png.3a9b7e026e1aa0bea0933e7c04b13c07.png

 

Link to comment
Share on other sites

Hi @SeanMeyer

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.

Link to comment
Share on other sites

On 4/25/2021 at 4:58 AM, SeanMeyer said:

I'm using a Submission Form Data Page to let my teachers Schedule A Class for their students. I have a calculated field for the number of classes left in the student's account. This field is a Virtual Field in the Data Page. I would like to Hide or Disable the Submit button and display a Warning Message when that field becomes zero.  Is there a way to do this without using JavaScript? If not, can someone please help me with JS because I don't have any experience using it. 

 

image.png.b41912f8a4b5d796b94453de93f6466a.png

image.png.3a9b7e026e1aa0bea0933e7c04b13c07.png

 

Unfortunately, you can't do both of those (alert and disable button) without JavaScript. You can try the following
 

<script>
  document.addEventListener("BeforeFormSubmit", function(event) {
    var VirtualVal = document.querySelector('select[name="cbParamVirtual1"]').value;


    if(VirtualVal == '0'){
     alert('You have no more classes available.');
     event.preventDefault();
    }
    
  });

</script>

This gets the value of your Virtual 1 - (cbParamVirtual1) and if it's 0, it will provide an alert with a custom message, and prevent the form from submitting.

The Submit button should be clicked first before this script fires.

 

For more information how to call field names through JavaScript - 

 

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.

Guest
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.

Loading...
 Share

×
×
  • Create New...