CODEWITHSUNDEEP
htmlformsanimationload
live2enjoy
live2enjoy

Reputation: 1

Loading Animation Upon html form submit

I'm having the hardest time finding info on what seems to be a very simple element.

Basically, I have an html form that has a drop down list. Upon clicking "Go", I would like the form or the page to display a loading gif animation until the next page appears.

Do I have to use javascript for this? Can it be done otherwise?

Here's the form code I am using:

<form name="form1">
<select style="width:200px;font-size:14px;color:#764813;font-family:verdana;background-color:#ffffff;" name="menu">
<option value="http://www.google.com">google</option>
<option value="http://www.amazon.com">amazon</option>
</select>
<input style="font-size:14px;color:#ffffff;font-family:verdana;background-color:#ff8800;" type="button" onClick="location=document.form1.menu.options[document.form1.menu.selectedIndex].value;" value="Go">

The options Google and Amazon here are examples. On my site they are pages that take a while to load so I want to show visitors that activity is happening after they click "Go".

Appreciate any insight on this.

Upvotes: 0

Views: 4315

Answers (2)

Omer Tuchfeld
Omer Tuchfeld

Reputation: 3022

Just add an <img> tag with display style set as "none":

<img src="yourgifanimation.gif" style="display:none" id="loadingGif">

and upon click display the gif by making it a block again:

document.getElementById('loadingGif').style.display = "block";

Upvotes: 3

Asteriskk
Asteriskk

Reputation: 387

You can load an loading image with Javascript like this : 

 <form name="form1">
    <select style="width:200px;font-size:14px;color:#764813;font-family:verdana;background-color:#ffffff;" name="menu">
    <option value="http://www.google.com">google</option>
    <option value="http://www.amazon.com">amazon</option>
    </select>
    <input style="font-size:14px;color:#ffffff;font-family:verdana;background-color:#ff8800;" type="button" onClick="document.getElementById('loading').innerHTML = "Redirecting...<img src=\"loading.gif\"/>";location=document.form1.menu.options[document.form1.menu.selectedIndex].value;" value="Go">
<span id="loading"></span>

Upvotes: 1

Related Questions