[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

load processing image before showing form

Posted on 2012-08-20
8
Medium Priority
?
375 Views
Last Modified: 2012-08-21
Hi experts,

I have a html file with form and i need to hide the form when the file is accessed for few seconds while showing a processing image. Please help.

Thanks
0
Comment
Question by:gloriaewold41
  • 4
  • 3
8 Comments
 
LVL 10

Expert Comment

by:gavsmith
ID: 38315375
Do you mean something like:

<html>
<head>
<script type="text/javascript">
showForm(){
document.getElementById("LoadingImage").style.display="none";  
document.getElementById("MyForm").style.display="block";
  }
</script>
</head>
<body onload="setTimeout('showForm()', 5000);">
<img id="LoadingImage" src="images/loadingimage.gif">
<form id="MyForm" style="display:none">
<input/>blah blah...
</form>
</body>
</html>

Open in new window

0
 

Author Comment

by:gloriaewold41
ID: 38315985
It's not working gavsmith. It loads the image and doesn't change. Please correct it, i really need it. I don't know if it's important but i have two forms in my page, one it's a search form. And in the left of the signup form i have a menu which i don't want to hide while image is loading.
0
 
LVL 7

Expert Comment

by:dimmergeek
ID: 38316001
At top of HTML page....

<div id="status" width="100%" style="margin-top:15%;">
        <center>
            <p>Inserting record....please wait.</p>
            <img src="Images/waiting.gif" alt="" />
        </center>
    </div>

Open in new window


at bottom of page....

<script language="javascript">
        document.getElementById('status').style.display = 'none';
    </script>

Open in new window

0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 10

Expert Comment

by:gavsmith
ID: 38316013
sorry i missed one bit...

line 4 should have been:

function showForm(){

instead of:

showForm(){

Let me know if that doesn't work.
0
 
LVL 10

Accepted Solution

by:
gavsmith earned 2000 total points
ID: 38316014
<html>
<head>
<script type="text/javascript">
function showForm(){
document.getElementById("LoadingImage").style.display="none";
document.getElementById("MyForm").style.display="block";
  }
</script>
</head>
<body onload="setTimeout('showForm()', 5000);">
<img id="LoadingImage" src="images/loadingimage.gif">
<form id="MyForm" style="display:none">
<input type="text">
</form>
</body>
</html>

Open in new window

0
 
LVL 10

Expert Comment

by:gavsmith
ID: 38316033
Your menu doesn't need to be within <form></form> if it is, it will also be hidden, if it isn't it won't be! Use a little css to place the loading image where you want it.
0
 

Author Comment

by:gloriaewold41
ID: 38316288
gavsmith your code works but not in my page. I followed the exact order like in your code but i can't get it to work. Why doesn't it load the script?
0
 

Author Closing Comment

by:gloriaewold41
ID: 38316380
I got it. Instead of body onload i've added

<script type="text/javascript">
window.onload = function() {
setTimeout('showForm()', 5000);                  
}
</script>

and it works. Thanks
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

868 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question