Jump to content
alexm72

Loading Screen appears after Submit Button is pressed

Recommended Posts

Hi folks I wanted to share a cool code with everyone when you press the Submit Button on a Form.  Well when you press the Submit Button with a file in it to load and there is a unique field in it (such as a Username for a registration form), there's a bit of a delay until you ge to the confirmation screen.  This confuses the Submitter and may press the button again - which results in an error because now the form is submitted twice but the same username was alreast submitted on the first form

Anyway you want a Loading screen to pop up.  Caspio should have this simple feature for a "low coding" platform!

In your header drop this code (#Submit is the submit button - on an update form its something different, #processing is the name of my div that will show the processing window after submission):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
  $("#Submit").click(function(){
    $("#processing").css({"display":"table"});
  });
});
</script>

In the Footer drop this:

<div id="processing"  style="display:none;background-color:rgba(222,200,70,0.9);height:100vh;width:100vw;position:fixed;top:0;"><br/><br/><span style="display:table;height:75wh;margin:auto;top:0;bottom:0;left:0;right:0;">Processing, Please Wait....<br/><br/><img style="display:table;margin:auto;" src="http://skquares.com/processing.gif"></img><br/<br/></span></div>

-------

thats it!  Notice the display is set to none because you dont want to show the window until the Submit button is pressed via the Jquery script.  Notice the height and width are set to the size of the screen with a position of fixed, top:0 - so that the whole screen is covered but you can shrink it by putting less width and height; background is my own color choice but you can change that - note leave the opacity not at 100% but I have it at 90%(0.9) so that the user can still see the form a little.  Also, http://skquares.com/processing.gif is where i store MY image so you have to change it to where you image is hosted (but you could use mine i guess).

 

Ok I hope this helps!

Share this post


Link to post
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...

×
×
  • Create New...