Is It Possible To Display An Animation While The Data Is Submitted?

[Cameron]

Hi everyone!

 

I have a Submission form, and I would to display an animation with "Loading..." text while the data is submitted. Is it possible in Caspio?

 

Any ideas are very much appreciated!

 

Thank you for your time!

[iren]

Hi Cameron,

 

You can paste the respective snippet inside the HTML Header and HTML Footer section.

 

Header: 

<h1 id="loadingTitle" style="display: none">Loading...</h1>

Footer:

<script>
var v_appkey = 'appkey_number',
v_appkeyInputs = document.getElementsByName('AppKey'),
v_appKeyInput = null;

for(var v_i = 0; v_i < v_appkeyInputs.length; v_i++){
if(v_appkeyInputs[v_i].value == v_appkey){
v_appKeyInput = v_appkeyInputs[v_i];
break;
}
}

if(v_appKeyInput){
var v_formNode = null,
v_tempNode = v_appKeyInput.parentNode;
do{
v_formNode = v_tempNode;
v_tempNode = v_tempNode.parentNode;
}while(v_formNode && v_formNode.nodeName.toLowerCase() != 'form');

if(v_formNode){
v_formNode.onsubmit = function(){
var v_title = document.getElementById('loadingTitle');
if(v_title){
v_title.style.display = '';
}
};
}
}</script> 

Hope it helps.

[Cameron]

Hi Iren,

 

Thank you for your time!

 

I am afraid, I don't understand what is 'appkey_number' and 'AppKey'.

I have tried several variants, but no animation is displayed.

 

Probably, I missed something.

[iren]

Hello Cameron,

 

Please change the 'appkey_number' value to the number of your DataPage AppKey.

 

Does it work for you?

[Cameron]

And I do not change the 'AppKey', if I understand correctly.

 

Thank you for your time and for your explanation! It works!

[Xiang]

Good morning,

 

I think, the following script can do the same.

The code for Header:

<h1 id="loadingTitle" style="display: none">Loading...</h1>
<div id="mainText"  style="">

The code for Footer:

</div>
<script>
document.getElementById('caspioform').onsubmit = function()
{
   document.getElementById('loadingTitle').style.display = '';
   document.getElementById('mainText').style.display = 'none';
}
</script>

I'm sorry, I don't understand for what the 'appkey_number' is used in the first script?

[iren]

Hi Xiang,

 

The script with 'appkey_number' is used when you implement a few DataPages on the web source.

 

Hope it helps. 

[NailDyanC]

Hi, just to update this post and add in the previous comments above, you may also consider checking these links:

https://forums.caspio.com/topic/19994-dynamic-progress-bar/?tab=comments#comment-56794
https://forums.caspio.com/topic/6492-progress-bar-needed/?tab=comments#comment-20304
https://forums.caspio.com/topic/4559-progress-bar-during-submission/?tab=comments#comment-14320