Making hidden div visible on submit

Bob Schneider
Bob Schneider used Ask the Experts™
How can I make the hidden div with the gif visible on submit at'

Please note that the page submits to itself.  If I can't make the div visible onsubmit then I understand that I will have to use ajax/jquery.  The key is that I need it to happen as quickly as possible.

Thank you so much!
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Software Team Lead
for your form element, you can add the onsubmit event:

<form class="form-inline" name="which_event" method="post" action="default.asp?event_id=680&amp;which=announcer" style="margin: 10px;" onsubmit="return showLoader()">

change your div by adding an ID:

<div id="loader" style="display: none;">
                <img src="/graphics/loader.gif" alt="Page Loading">

then add this javascript function:

function showLoader() {
      return true;

Open in new window

or you can also replace:

Open in new window


Open in new window

if you don't want the animation effect.

full amended script as below:

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!--the above three meta tags must come first-->
<meta name="GENERATOR" Content="Microsoft Visual Studio 6.0">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="postinfo" content="/scripts/postinfo.asp">
<meta name="resource" content="document">
<meta name="distribution" content="global">

<title>GSE Announcer Portal</title>
<meta name="description" content="GSE (Gopher State Events) Announcer's Portal for identifying incoming participants.">

<script src=""></script>
<script src="//"></script>
<script src="" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="dist/js/bootstrap-submenu.min.js"></script>
<script src=""></script>
<script src="/misc/scripts.js"></script>

<link rel="alternate" href="" hreflang="en-us" />
<link rel="stylesheet" href="//">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="dist/css/bootstrap-submenu.min.css">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="/resources/demos/style.css">

<script src="/misc/scripts.js"></script>
<script type="text/javascript">
    function showLoader() {
        return true;
<link rel="icon" href="favicon.ico" type="image/x-icon"> 
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> 

<body onload="javascript:bib_lookup.bib_num.focus()">
<div class="container">
 	<h3 class="h3">Gopher State Events Announcer Portal</h3>
	<form class="form-inline" name="which_event" method="post" action="default.asp?event_id=680&amp;which=announcer" style="margin: 10px;" onsubmit="return showLoader()">
	<label for="events">Select Event:</label>
	<select class="form-control" name="events" id="events" onchange="">
		<option value="">&nbsp;</option>
				<option value="682">Tonka Turkey Trot 2017</option>
				<option value="738">Turkey Day 5K 2017</option>
				<option value="680" selected>STRIDE-ROTC 2017</option>
				<option value="658">Gray Ghost 2017</option>
				<option value="659">Pumpkin Run 2017</option>
				<option value="648">PrinceTen 2017</option>
				<option value="657">DMCS Spooktacular 2017</option>
				<option value="692">Strides for Sight 2017</option>
				<option value="683">Timber Dash 2017</option>
				<option value="644">Harvest Festival 2017</option>
				<option value="645">Gandy Dancer Trail Marathon 2017</option>
				<option value="722">Mortenson 5K 2017</option>
				<option value="702">Party for a Purpose 2017</option>
				<option value="688">Arbor Dash 2017</option>
				<option value="672">Thumbs Up High 5K 2017</option>
				<option value="674">Franny Flyer 2017</option>
				<option value="731">Heritage Classic 2017</option>
				<option value="678">HAE-In-Motion 2017</option>
				<option value="671">Circle the Lake 2017</option>
				<option value="656">Bertram-LaVallee Trail Ru 2017</option>
				<option value="737">Lasting Imprint 2017</option>
				<option value="735">Brain Power Run 2017</option>
				<option value="641">Kinni River Trout Trot 2017</option>
				<option value="660">Red Rooster Run 2017</option>
				<option value="711">Angie Ley 5K 2017</option>
				<option value="703">L.O.V.E. Run 2017</option>
				<option value="706">Twin Cities Team Hope 2017</option>
				<option value="696">Mora Half & 5k 2017</option>
				<option value="664">Darwin Twine-K 2017</option>
				<option value="687">Head 4 Awareness 2017</option>
				<option value="637">Yellow Rose 2017</option>
				<option value="635">Rainy Lake Triathlon 2017</option>
				<option value="632">Hanover Harvest Festival 2017</option>
				<option value="705">Mpls Madness for MPS 2017</option>
				<option value="713">Red Zone Rush 2017</option>
				<option value="630">Casselton Summerfest 2017</option>
				<option value="634">Team Liam 2017</option>
				<option value="626">Crystal Frolics 2017</option>
				<option value="636">In n Out of Luck 2017</option>
				<option value="622">Monticello Riverfest 2017</option>
				<option value="623">Otter Creek 55 2017</option>
				<option value="653">River Falls Days 2017</option>
				<option value="654">Spooner Stampede 2017</option>
				<option value="676">Litchfield Watercade 2017</option>
				<option value="717">Holdingford Daze 2017</option>
				<option value="691">Awesome Blossom Run-Walk 2017</option>
				<option value="665">Baudette Firecracker 2017</option>
				<option value="619">Apple Valley Freedom Days 2017</option>
				<option value="617">Dan Patch Days 2017</option>
				<option value="695">Lake of the Woods Tri 2017</option>
				<option value="686">Melrose Riverfest 2017</option>
				<option value="631">Spud Fest Lakes Run 2017</option>
				<option value="675">Perham Turtlefest 2017</option>
				<option value="643">Becker Freedom Days 2017</option>
				<option value="709">Nicollets Hope 2017</option>
				<option value="707">Friendly City Days 2017</option>
				<option value="681">Stop the Trafficking 2017</option>
				<option value="628">Citizen's R2R 5K 2017</option>
				<option value="615">Johnson-Turner Calorie Burner 2017</option>
				<option value="613">Willie Walleye 2017</option>
				<option value="677">Smokin in Steele 2017</option>
				<option value="655">JJs 2.5K & 5K 2017</option>
				<option value="693">Randy's Run 2017</option>
				<option value="679">A to Z Mental Health Awareness 2017</option>
				<option value="697">Stride for Packer Pride 2017</option>
				<option value="698">Fit for Life 5K 2017</option>
				<option value="712">MAML  Roll & Run 2017</option>
				<option value="621">Celebration of Children 2017</option>
				<option value="640">Get it Dunn Run 2017</option>
				<option value="633">Mercy Foundation Moose Run 2017</option>
				<option value="607">Run New Prague 2017</option>
				<option value="710">Broken Marathon 2017</option>
				<option value="699">HVMHC 5k 2017</option>
				<option value="689">Stompin Through The Woods 2017</option>
				<option value="606">YWCA Girls on the Run 2017</option>
				<option value="602">Walk on Waconia 2017</option>
				<option value="624">March Madness 2017</option>
				<option value="667">Everybody's Irish 2017</option>
				<option value="595">Irish Scamper 2017</option>
				<option value="642">Chase a Leprechaun 2017</option>
				<option value="701">Mille Lacs Kite Crossing 2017</option>
				<option value="690">Fat Bike Blitz 2017</option>
				<option value="651">Vasaloppet Sunday 2017</option>
				<option value="650">Vasaloppet 2017</option>
				<option value="548">Boulder Lake Ski n Showshoe 2017</option>
				<option value="662">Arctic Fever Fat Tire 2017</option>
				<option value="578">Solstice Chase 2016</option>
				<option value="575">Snowflake Shuffle 2016</option>
				<option value="591">Beast2Feast 2016</option>
				<option value="592">Tonka Turkey Trot 2016</option>
				<option value="600">STRIDE and Veterans 5k 2016</option>
				<option value="639">Holiday Hustle 2016</option>
				<option value="590">Terror Trot 2016</option>
				<option value="565">Gray Ghost 5k 2016</option>
				<option value="556">Pumpkin Run-Walk 2016</option>
				<option value="647">Bluff Color Fest 2016</option>
				<option value="546">Gandy Dancer Trail Marathon 2016</option>
				<option value="544">PrinceTen 5-10 Miler 2016</option>
				<option value="598">Runnin the River 2016</option>
				<option value="604">DMCS Spooktacular 2016</option>
				<option value="561">UCP Run for a Reason 2016</option>
				<option value="620">Lymphedema Run-Walk 2016</option>
				<option value="627">Strides for Sight 2016</option>
				<option value="567">Timber Dash 2016</option>
				<option value="534">Harvest Fest Trail Run 2016</option>
				<option value="594">ACC Root Beer Run 2016</option>
				<option value="584">Circle the Lake  2016</option>
				<option value="558">Party for a Purpose 2016</option>
				<option value="610">Mortensen 5K 2016</option>
				<option value="564">Lasting Imprint 2016</option>
				<option value="573">Peace Lutheran Trail Run 2016</option>
				<option value="547">Bertram-LaVallee 2016</option>
				<option value="537">Bigfork Valley Challenge 2016</option>
				<option value="614">Kinni River Trout Trot 2016</option>
				<option value="562">Red Rooster Run 2016</option>
				<option value="605">World Vision 6K for Water 2016</option>
				<option value="527">Vibha Dream Mile 2016</option>
				<option value="528">Mora Half-Marathon & 5k 2016</option>
				<option value="589">LOVE Run 2016</option>
				<option value="577">Franny Flyer 2016</option>
				<option value="560">Head4Awareness 2016</option>
				<option value="524">Yellow Rose 5k 2016</option>
				<option value="542">Darwin Twine K 2016</option>
				<option value="625">Rainy Lake Triathlon 2016</option>
				<option value="618">Angie Ley 5k 2016</option>
				<option value="525">Hanover Harvest Festival 2016</option>
				<option value="599">Twin Cities Team Hope 2016</option>
				<option value="522">Maah Daah Hey 100 2016</option>
				<option value="519">Team Liam 5k 2016</option>
				<option value="608">Lake of the Woods Relay for Life 2016</option>
				<option value="612">Crystal Frolics 2016</option>
				<option value="520">Casselton Summerfest 2016</option>
				<option value="529">Ottercreek 55 2016</option>
				<option value="512">Monticello Riverfest 2016</option>
				<option value="611">In n Out of Luck 2016</option>
				<option value="555">Roseau ALS 5k 2016</option>
				<option value="523">Gibbon Funfest 2016</option>
				<option value="603">River Falls Days 2016</option>
				<option value="616">Awesome Blossom Run-Walk 2016</option>
				<option value="508">Apple Valley Freedom Days 2016</option>
				<option value="505">Baudette Firecracker 2016</option>
				<option value="506">Dan Patch Days 2016</option>
				<option value="511">Melrose Riverfest 2016</option>
				<option value="518">Big Lake Lakes Run 2016</option>
				<option value="533">Freedom Days 2016</option>
				<option value="563">Nicollet's Hope 2016</option>
				<option value="579">Perham Turtlefest 2016</option>
				<option value="587">Citizens Race to Raise 5k 2016</option>
				<option value="582">Stop  the Trafficking 2016</option>
				<option value="557">Sartell Summerfest 2016</option>
				<option value="554">Hope Shores Bible Camp 5K 2016</option>
				<option value="553">Smokn' in Steele 2016</option>
				<option value="566">Johnson-Turner Calorie Burner 2016</option>
				<option value="580">Celebration of Children 2016</option>
				<option value="601">MAML Roll & Run 2016</option>
				<option value="504">Willie Walleye 2016</option>
				<option value="550">Randy's Run 2016</option>
				<option value="572">Fit for Life 5K 2016</option>
				<option value="499">Stride for Packer Pride 2016</option>
				<option value="498">Run New Prague 2016</option>
				<option value="585">Stompin Through The Woods 2016</option>
				<option value="581">YWCA Girls on the Run 2016</option>
				<option value="496">Walk on Waconia 2016</option>
				<option value="551">Dragon Spitfire 2016</option>
				<option value="552">March Madness 2016</option>
				<option value="559">Irish Scamper 2016</option>
				<option value="576">Everybody's Irish 2016</option>
				<option value="538">Mille Lacs Kite Crossing 2016</option>
				<option value="532">Chase a Leprechaun 5K 2016</option>
				<option value="507">Minnesota Pursuit Champs 2016</option>
				<option value="569">Vasaloppet Sunday 2016</option>
				<option value="492">Vasaloppet 2016</option>
				<option value="535">Big Climb 53 2016</option>
				<option value="583">Big Climb 105 2016</option>
				<option value="530">Big Island and Back 2016</option>
				<option value="514">Three Rivers Rennet 2016</option>
				<option value="574">Solstice Chase 2015</option>
				<option value="483">Snowflake Shuffle 2015</option>
				<option value="459">Tonka Turkey Trot 2015</option>
				<option value="463">Beast 2 Feast 2015</option>
				<option value="458">Gray Ghost 5k 2015</option>
				<option value="437">Terror Trot 2015</option>
				<option value="545">Phi Psi 5k 2015</option>
				<option value="436">Pumpkin Run-Walk 2015</option>
				<option value="476">PrinceTEN Miler 2015</option>
				<option value="473">UCP Run for a Reason 2015</option>
				<option value="474">Gandy Dancer Traill Marathon 2015</option>
				<option value="521">Historic Riverfront 5k 2015</option>
				<option value="495">ACC Root Beer Run 2015</option>
				<option value="435">Timber Dash 2015</option>
				<option value="420">Halloween Fun Run 2015</option>
				<option value="432">Party for a Purpose 2015</option>
				<option value="515">Tonka Trot 2015</option>
				<option value="484">Lasting Imprint 5k & 10k 2015</option>
				<option value="479">Peace Lutheran Trail 5k 2015</option>
				<option value="517">McLeod Glo Run 2015</option>
				<option value="526">Mortenson 5k 2015</option>
				<option value="516">Run2Walk 2015</option>
				<option value="497">Bigfork Valley Challenge 2015</option>
				<option value="481">BART Dog Duathlon 2015</option>
				<option value="428">Red Rooster 5 Mile 2015</option>
				<option value="452">Phillip LaVallee Memorial 2015</option>
				<option value="453">VIbha Dream Mile 2015</option>
				<option value="465">Pet Haven Doggy Dash 2015</option>
				<option value="462">LOVE Run 2015</option>
				<option value="490">Rise to the Top-Dont Stop 2015</option>
				<option value="494">Mora Half-Marathon 2015</option>
				<option value="471">Franny Flyer 2015</option>
				<option value="439">Round the Corner 5k 2015</option>
				<option value="434">Angie Ley 5K 2015</option>
				<option value="510">Rooster Run 2015</option>
				<option value="424">Darwin Twine Ball 2015</option>
				<option value="425">Head4Awareness 2015</option>
				<option value="427">Yellow Rose 2015</option>
				<option value="421">Hanover Harvest Festival 2015</option>
				<option value="493">Maah Daah Hey 100 2015</option>
				<option value="456">Cass County Summerfest 2015</option>
				<option value="447">LLFD Firefighter Memorial 2015</option>
				<option value="423">Team Liam 2015</option>
				<option value="501">Roseau ALS 5k-10k 2015</option>
				<option value="451">Monticello Riverfest 2015</option>
				<option value="433">Tonka Mud Run 2015</option>
				<option value="408">Apple Valley Freedom Days 2015</option>
				<option value="411">Baudette Firecracker 2015</option>
				<option value="445">Excelsior Firecracker 2015</option>
				<option value="440">Spud Fest Lakes Run 2015</option>
				<option value="410">Melrose Riverfest 2015</option>
				<option value="480">Nicollet's Hope 2015</option>
				<option value="500">Summerfest Half-Marathon 2015</option>
				<option value="486">Dan Patch Days 2015</option>
				<option value="477">Joggin for the Noggin 2015</option>
				<option value="419">Becker Freedom Days 2015</option>
				<option value="485">Sartell Summerfest 2015</option>
				<option value="409">Willie Walleye 2015</option>
				<option value="438">Camp Ojibway 5k 2015</option>
				<option value="431">Smokin in Steele 2015</option>
				<option value="448">Johnson-Turner Calorie Burner 2015</option>
				<option value="469">Randys Run 2015</option>
				<option value="470">Runnin' with the Law 2015</option>
				<option value="478">Holy Spirit Academy 5k 2015</option>
				<option value="449">Empower Race for the Future 2015</option>
				<option value="488">Stride for Packer Pride 2015</option>
				<option value="455">Run New Prague 2015</option>
				<option value="444">Tonka Youth Triathlon 2015</option>
				<option value="392">Walk on Waconia 2015</option>
				<option value="443">Litchfield Lite 2015</option>
				<option value="450">March Madness 2015</option>
				<option value="384">Irish Scamper 5K 2015</option>
				<option value="441">Luck o' the Lake 2015</option>
				<option value="416">Everybody's Irish 5k 2015</option>
				<option value="418">Chase a Leprechaun 2015</option>
				<option value="475">Kite Crossing 2015</option>
				<option value="460">MN Pursuit Champs 2015</option>
				<option value="461">Big Island and Back 2015</option>
				<option value="468">Snow Kite Open 2015</option>
				<option value="466">Iditaride Fat Tire 2015</option>
				<option value="467">Pre-Loppet 2015</option>
				<option value="399">Snowflake Shuffle 2014</option>
				<option value="412">Beast2Feast 2014</option>
				<option value="426">Tonka Turkey Trot 2014</option>
				<option value="413">Terror Trot 5k 2014</option>
				<option value="339">Pumpkin Run-Walk 2014</option>
				<option value="387">Gandy Dancer Tr Marathon 2014</option>
				<option value="389">UCP Run for a Reason 2014</option>
				<option value="337">Timber Dash 2014</option>
				<option value="417">Halloween Fun Run 2014</option>
				<option value="385">CMCU 5K 2014</option>
				<option value="382">Litchfield Homecoming 5K 2014</option>
				<option value="391">Party for a Purpose 2014</option>
				<option value="368">Apple of the Lake 2014</option>
				<option value="360">Tri Your Luck 2014</option>
				<option value="338">4 Miles Four Paws 2014</option>
				<option value="414">Blazin Thru Bertram 2014</option>
				<option value="429">VIbha Dream Mile 10k 2014</option>
				<option value="395">Vibha Dream Mile 5k 2014</option>
				<option value="332">Red Rooster 5 Mile 2014</option>
				<option value="373">Pet Haven Doggy Dash 2014</option>
				<option value="422">LOVE 5k Run 2014</option>
				<option value="398">Angie Ley 5k 2014</option>
				<option value="397">Round the Corner 5k 2014</option>
				<option value="329">Rooster Run 2014</option>
				<option value="326">Yellow Rose 5K 2014</option>
				<option value="327">Emotions in Motion 2014</option>
				<option value="388">Darwin Twine Ball Day 5k 2014</option>
				<option value="383">Head 4 Awareness 5K 2014</option>
				<option value="376">Hanover Harvest Festival 2014</option>
				<option value="378">Team Liam 5k 2014</option>
				<option value="341">Cass County Summerfest 2014</option>
				<option value="366">LLFD Firefighter's Memorial 5k 2014</option>
				<option value="375">Tri-Angels 5k-10k 2014</option>
				<option value="386">Tonka Mud Run 2014</option>
				<option value="349">Monticello Riverfest 2014</option>
				<option value="367">Firecracker 5k-10k 2014</option>
				<option value="346">Firecracker 5k 2014</option>
				<option value="381">Freedom Days 2014</option>
				<option value="372">Spud Fest 2014</option>
				<option value="306">Melrose Riverfest 5K 2014</option>
				<option value="347">Victory Run 2014</option>
				<option value="394">Freedom Days 5k 2014</option>
				<option value="390">Sartell Summerfest 2014</option>

    <select class="form-control" name="num_to_show" id="num_to_show" onchange=";">
            <option value="0">All</option>
                <option value="10" selected>10</option>
                <option value="20">20</option>
                <option value="30">30</option>
                <option value="40">40</option>
                <option value="50">50</option>
                <option value="60">60</option>
                <option value="70">70</option>
                <option value="80">80</option>
                <option value="90">90</option>
                <option value="100">100</option>
	<input class="form-control" type="hidden" name="submit_event" id="submit_event" value="submit_event">
	<input class="form-control" type="submit" name="get_event" id="get_event" value="Get This Event" style="font-size:0.8em;">

        <ul class="list-inline">
            <li class="list-group-item"><a href="default.asp?event_id=680&amp;which=bib">Bib List</a></li>
            <li class="list-group-item"><a href="default.asp?event_id=680&amp;which=announcer">Announcer List</a></li>

            <div id="loader" style="display: none;">
                <img src="/graphics/loader.gif" alt="Page Loading">

            <h3 class="h3">Announcer List</h3>
            <a href="default.asp?event_id=680&amp;num_to_show=10&amp;which=announcer" style="margin: 10px 0 0 15px;">
                <img src="/graphics/refresh.jpg" alt="Refresh" style="height: 50px;">

            <h5 class="h5">Number of Reads: 0</h5>
            <table class="table table-striped">

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018
If I understand the question - you want the hidden div to become visible after submit - the page posts to itself so there is a page refresh and on the refresh you want the div to be visible?

(Link gives 404 by the way)

There are several ways of solving this

1. After submit in your server code just render the page so the div is visible or just render it - on first load there should be no need to render it at all if you are only going to make it visible on post back.

2. Depending on what other changes the submit makes to the page you can set the target of the form to a hidden iframe - and use javascript to catch the onsubmit (as Ryan shows above) and show the div

3. As you suggested you use an AJAX submit - again if the return from the submit has no other function than to show the div then this makes the most sense.
Most Valuable Expert 2018
Distinguished Expert 2018
As Julian Says, the link returns a 404 so can't really see  what you're trying to do.

If your GIF is a loader gif, then showing it before carrying out a normal POST makes no sense at all. It will apear for a very brief flash and then the whole page would be refereshed.

Probably the way forward here is to submit your form with an AJAX call. Simple show the div before you make the call and decide what you want to do after the call (update the DOM / hide the DIV etc)

Clarify what you need and we can give you specific details.
Bootstrap 4: Exploring New Features

Learn how to use and navigate the new features included in Bootstrap 4, the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.

Bob SchneiderCo-Owner


This is awesome!  Thank you very much.

Final question: is it possible to amend this to show the loader when the orange "refresh" button is clicked rather than when the form is submitted?
Most Valuable Expert 2018
Distinguished Expert 2018

What orange 'Refresh' button - your link show a Page Not Found so we can't see it!
Bob SchneiderCo-Owner


There was a "'" on the end of the link so I took that off...

You can now see the link.  I got that to work.  Thanks so much!
Most Valuable Expert 2018
Distinguished Expert 2018

OK. Fair Enough - still think it looks odd that you display a page loader and then immediately re-load the page. You might get a better UI feel if you consider making an AJAX call.
Bob SchneiderCo-Owner


I am sure I will gravitate to that and I appreciate your suggestion.  Under a bit of a time crunch right now, so...

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial