Hide Submit Button and Display a Warning Message

[SeanMeyer]

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. 

 

 

[telly]

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.

[telly]

Hi @SeanMeyer,

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!

[TellMeWhy]

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. 

 

 

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 - 

 

[IamNatoyThatLovesYou]

Hello Every one,

Just providing an additional code here as well jsut for disabling the submit function when hitting the enter key.

<script>

document.addEventListener('BeforeFormSubmit', function(event) {

      event.preventDefault();

});

</script>

[Kronos]

Hi,

Just also want to add this similar forum thread for hiding and disabling update button on a Details page.

 

[IamNatoyThatLovesYou]

Hello Everyone, just sharing a code that may be useful for this conversation. This hides the submit button when clicked/pressed.
 

<script type="text/javascript">

document.addEventListener('DataPageReady', function (event) {

var subbutton= document.querySelector(".cbSubmitButton");
subbutton.unsafe =  function() { subbutton.style.display = "none"; };

 });

</script>

[chumkirebzi]

Hello everyone! I tried following this forum post and it was very helpful! Sharing a line of code I added which might be helpful for people who have the "Responsive" option enabled on their DataPage.

<style>
.cbSubmitButtonContainer {
display:none !important;
}
</style>

The important tag ensures that those accessing the DataPage from smaller screens such as a phone will also have the button hidden until the condition is met!