loading image

[ff123]

can anyone help me with a code that I can use in a html form.. when we click submit a image appear on the page with a loading gif file while the html goes to the post response page.

[djr33]

When a form is submitted, the action of the form is like a link-- the browser goes there, and it also sends the data to that page.
So the page that loads and the page that gets the data must be the same.

You can try to work around this a few ways:

1. You could use frames, and submit the data to an iframe/frame on your page while the main page does a loading gif.

2. You could just have a loading gif for a few seconds (5?) until it submits the form (delay the form submission and open the gif with Javascript).

3. You could use Ajax or another similar method to submit the form in the background and stay on the same page, while loading a gif.


Also, you could actually make the second page yourself, with a loading gif or whatever you want, and program that page (with PHP, etc.) to accept the data.



For a more specific answer, you need to explain a little more about what you want to do, give an example, or pick one of the options above.

[ff123]

2. You could just have a loading gif for a few seconds (5?) until it submits the form (delay the form submission and open the gif with Javascript).



how about this one?

[ff123]

help?

[ff123]

bump..

[masgenpin]

[Spam, deleted]

[ff123]

3. You could use Ajax or another similar method to submit the form in the background and stay on the same page, while loading a gif.
________________


thank you for your reply but can you please tell me how to do this as i have to knowledge about Ajax or any idea for this..

[forum_amnesiac]

Have a look at this link, it shows how to display an image on form submission.

http://www.mollerus.net/tom/blog/2008/01/ui_technique_changing_submit_button_appearance_aft.html

Don't know if that's what you're looking for?

[djr33]

Use a script like one of the many incarnations of "lightbox" and display a loading gif. Trigger this event on form submission with a 5 second delay until the next page loads.

The link above looks helpful too.

[ff123]

Use a script like one of the many incarnations of "lightbox" and display a loading gif. Trigger this event on form submission with a 5 second delay until the next page loads.

The link above looks helpful too.


could it be something like this in Submit button


rel="lightbox" onclick="showLoading(this);"

and this in js




function showLoading(button) {

one = new Image ( );
one.src = "loading1.gif";
button.style.color = '#676561';
wait(400); // Else the form will submit before the background image changes
return true;


}


i know this is wrong but there might be a correction and it will work

[ff123]

Bump...

[djr33]

Yes, it is something like that. But you are just making a "new image" and not actually putting it anywhere on the page.

As I mentioned above, check out any of the various "lightbox" scripts, and trigger viewing that image upon clicking submit. And just add a delay then submit the form.

[ff123]

i tried with this code




function showLoading(button) {


document.write('<IMG SRC="loading.gif ">');

button.style.color = '#676561';
wait(400); // Else the form will submit before the background image changes
return true;


}

it open the loading.gif in the same browser not display on the page even i have rel="lightbox" anyway.. atlease tell me the code or something thanx

[djr33]

Hm, now looking at lightbox again myself, this seems a bit difficult. You can't use the "rel" property with a form submission, though perhaps you would be able to use an image as the submit button (just a normal image) then attach an extra javascript action of submitting the form after a delay. That would likely work.

It seems like you have to write a bit of your own javascript for this, or at least modify one of the functions. I'm not sure what the best approach is, but you are close, at least in the overall plans. Now the question is just how to get the image to show up like lightbox, but triggered another way. I suggest looking at the code inside lightbox and trying to modifying the event so it's a function, not based on rel.

[webworld]

First of all you have to be using something other than straight HTML...like ASP or JSP. This is because you are going to have to send part of the page, flush the buffer and then send the rest.

Near the top of your page, you print out a span that contains your loading message. In my case this will also contain some kind of animated gif to let the user know that " work" is going on.

[djr33]

Your approach, however, suggests submitting the form then on the second page displaying the image. It is basically the same idea, but a different order than discussed earlier.