Page de chargement après un formulaire

<script language="JavaScript">

var currentLayer = 'page1';

function showLayer(lyr){

	hideLayer(currentLayer);

	document.getElementById(lyr).style.visibility = 'visible';

	currentLayer = lyr;

}

function Suite(lien){

	

	var objet = document.getElementById('load'); // entre les deux ' tu mes le nom du div que tu veux faire apparaître !

	

	if(objet.style.display == "none" || !objet.style.display){

		

		objet.innerHTML = "<div class='load' id='load2' style='width: 600px;'></div><div class='load2' style='width: 600px;'><br><br><br><br><br><br><br><br><br><br><center><img src='/images/Loading.png'></center></div>";

		objet.style.display = "block";

		objet.style.overflow = "hidden"; 

		lien.innerHTML = "<input type='submit' value='Submit' id=''>";

       

        var hFinal      =     600;  //Hauteur finale (la hauteur une fois que ça aura fini de déplier !)

        var hActuel     =     0;	 	//Hauteur initiale (la hauteur dès le début !)

       

        var timer;

        var fct =        function ()

        {

                hActuel  +=       20;     //Augmente la hauteur de 20px (tu peux modifier) tous les 40ms !

				

                objet.style.height     =	 hActuel      +     'px';

				

                if( hActuel > hFinal)

                {

                        clearInterval(timer);   //Arrête le timer

                        objet.style.overflow    =   'inherit';

                }

        };

        fct();



        

		timer = setInterval(fct,40);    //Toute les 40 ms

		

	}else if(objet.style.display == "block"){

		

		var hFinal      =     0;  //Hauteur finale (la hauteur une fois que ça aura fini de déplier !)

        var hActuel     =     680;	 	//Hauteur initiale (la hauteur dès le début !)

       

        var timer;

        var fct =        function ()

        {

                hActuel  -=   20;     //Augmente la hauteur de -20px (tu peux modifier) tous les 40ms !

				

                objet.style.height     =	 hActuel      +     'px';

				

                if( hActuel < hFinal)

                {

                        clearInterval(timer);   //Arrête le timer

                        objet.style.overflow    =   'inherit';

						objet.style.display     =   "none";

                }

        };

        fct();



        

		timer = setInterval(fct,40);    //Toute les 40 ms

		



		lien.innerHTML = "+";

		

	}

}

</script>

<form name="myform" ENCTYPE="multipart/form-data" action="index.php" method="post">

<div id="page1" class="page" style="visibility:visible;">

<label id="#" name="#">



	<div class="content_left">

		<p><label class="tlabel" for="make">Make*</label>

		{ if $mmake eq ''}

		<select name="make">

		<OPTION Value="">Select Make</OPTION>

		<option value="Other">Other </option>

		<option value="Alfa Romeo">Alfa Romeo </option>

		<option value="Audi ">Audi </option>

		<option value="Bentley ">Bentley </option>

		<option value="BMW ">BMW </option>

		</select>

		{else}

		<textarea name='make' Value='$mmake' readonly>

		{/if}

		</p>

	</div>



	<p><CENTER><a href="#"><input type="button" id="C1" value="Continue" onClick="return validate_form_1 ( );"></a></CENTER></p>

</div>





<div id="page2" class="page">

	<label id="#" name="#">





	<div class="content_fullwidth">

		<p><B>Add Photographs:</B></p>

		<input type="hidden" name="MAX_FILE_SIZE" value="2000000">

	</div>

	<div class="content_left">		

		<p><label class="tlabel" for="image1">Image 1</label> <input id="file1" name="file1" type="file">

		<p><label class="tlabel" for="image2">Image 2</label> <input id="file2" name="file2" type="file">

		<p><label class="tlabel" for="image3">Image 3</label> <input id="file3" name="file3" type="file">

	</div>



	<div class="content_fullwidth">

		<p><B>Additional Selling Points:</B></p>

		<p><textarea name="additional" cols="65" rows="3" class="my_textarea"></textarea></p>

	</div>



	<div class="content_fullwidth">

		<CENTER><a href="#"><input type="button" id="B1" value="Go Back" onClick="showLayer('page1')"><input type="button" id="C2" value="Continue" onClick="showLayer('page3')"></a></CENTER>

	</div>

</div>



<div id="page3" class="page" name="page3">

<label id="#" name="#">

	<div id="load" style="display: none; width: 0px;"></div>

	<div class="content_fullwidth2">



	<div class="content_right">

		<b>Choose Payment Option:</b>

		{if $USER_LEVEL < 3}

			<p><input type="radio" name="payment_option" "checked" value="realex">&nbsp;&nbsp;Credit Card</p>

			<p><input type="radio" name="payment_option" value="paypal">&nbsp;&nbsp;PayPal</p>

			<p><input type="radio" name="payment_option" value="daopay">&nbsp;&nbsp;Phone Payment with DaoPay<br>&nbsp;&nbsp;&nbsp;(SMS or Phone Call)</p>

		{else}

			<p>No payment required</b>

		{/if}

	</div>



	

	

	<div class="content_fullwidth">

		<input type="hidden" name="action" value = "add_auction">

		<input type="hidden" name="MAX_FILE_SIZE" value="50000">

		<p><CENTER><a href="#"><input type="button" id="B3" value="Go Back" onClick="showLayer('page2')"><input type="submit" value="Submit" id="submit"></a></CENTER></p>



		<div id="load" style="display: none; width: 0px;"></div>

	</div>

	</div>

</div>

</form>

function trait()

{ contrôler la saisie

  si erreur : return false;

  sinon, faire apparaître le .gif 

  return true;

}

<form onsubmit=return(trait());".....>

....

<input type="submit" />

</form>

<input onclick="Suite(this)" type="submit" value="Submit" id="submit">

<body>

	<script type="text/javascript">

		function trt(frm)

		{	if ( frm.nv.value.length==0 )

					{	alert("à remplir");

						return false;

					}

			else	{	frm.im.style.display="inline";

						return true;

					}

		}

	</script>

	<form action="t1.php" method="post"

			onsubmit="trt(this);">

		<input type="text" name="nv" />

		<img src="t1.gif" name="im" style="display:none;" />

		<input type="submit" />

	</form>

</body>

<?php

	sleep(5);

	echo date('h:i:s') . "\n";

?>