Loading image while form loads php script to an iframe

Question

I have a form which submits a php file to an iframe.

Here is the form:

<form action="del.php" method="post" target="output"  >
Server: <input type="text" name="server_id" value="" />
Name:<input type="text" name="name" value="" />
Password:<input type="password" name="password" value="" /> <br>  
Create Log? <input type="checkbox" name="log" value="" />
Output list of files? <input type="checkbox" name="out" value="" /><br>
<input type="submit" name="delete" value="Delete FTP!" /></td><br>

<iframe id="output"  ></iframe>

del.php deletes files on a romote ftp. That recursive funcion takes a while. Now I want to show a loading image by loading the del.php to the iframe.

Take a look at AJAX and jQuery, which enable you to accomplish what you are looking for.. — TryingToImprove, Feb 11 '13 at 21:13
Have del.php output the "loading image" into the Iframe, then [flush the output][1]. [1]: http://stackoverflow.com/questions/3483035/php-flushing-output-as-soon-as-you-call-echo — Diodeus - James MacFarlane, Feb 11 '13 at 21:14
If I flush the "loading image" it will be shown all the time. But I just want to see it while loading the php file! — Sm0ke, Feb 11 '13 at 22:22

Ozzy Gonzalez · Answer 1 · 2013-04-25T15:33:08.523

I hope this answer helps you or anyone else looking for a solution. This one worked for me.

I'm trying to do the same. I have a page that calculates shipping on an iframe and i want it to show a loading gif image while the shipping cost loads as an xml from my shipping provider.

The IFRAME is covered with a DIV where the loading image (or any image) is found. The image is at the center of the DIV area and its size can be up to 950x633 pixels. When the IFRAME page is loaded, the loading image will be hidden.

What you need to change is the image URL for your site. You might also want to change the DIV background color (currently set to #FFF).

   <style>
     #loadImg{position:absolute;z-index:999;}
     #loadImg div{display:table-cell;width:950px;height:633px;background:#fff;text-           align:center;vertical-align:middle;}
   </style>
       <div id="loadImg"><div><img src="loading.gif" /></div></div>
          <iframe border=0 name=iframe src="html/wedding.html" width="950" height="633" scrolling="no" noresize frameborder="0" onload="document.getElementById('loadImg').style.display='none';"></iframe>

This worked for me. It shows a loading Gif animation before the page is loaded in my iframe box. :)

Loading image while form loads php script to an iframe

1 Answers1