Ladeanzeige Script umschreiben

[starfoxfs]

Hallo zusammen,

Ich habe ein Ajax Ladescript von http://www.rutschmann.biz

Das Script zeigt eine Ladeanzeige wenn ich ein eine Berechnung durch ein Formular laufen lasse.

Ich möchte das Script so umschreiben das wenn ich von meiner PHP Seite den Formular Button Absenden klicke die Ladeanzeige des Scripts erscheint und erst wieder aufhört wenn meine nächste Seite geladen ist.

Leider habe ich keine Ahnung von Ajax bzw Java wer kann mir weiterhelfen ?

<form action="?ctg=show&action=mdlarea" method="post" 
<input type="submit" name="submit" onClick="rechnen()" value="Weiter">
</form>

Beim Klick auf Weiter soll die Ladeanzeige angezeigt werden und erst wieder aufhören wenn ?ctg=show&action=mdlarea vollständig geladen ist.

<script type="text/javascript" src="jquery-1.2.6.js"></script>

	<script type="text/javascript">
    	var ajxFile = "ajx.php";
		
		function rechnen() {
            var zahl1 = document.getElementById("zahl1").value;
            var zahl2 = document.getElementById("zahl2").value;

						
        
			loadLoader();
            $.ajax({
               type: "POST",
               url: ajxFile,
               success: function(phpData){
        
                  document.getElementById('ergebniss').innerHTML = phpData;
				  unloadLoader();
               }
             });
      }


function loadLoader() {
  var WindowWidth = 0, WindowHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    WindowWidth = window.innerWidth;
    WindowHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    WindowWidth = document.documentElement.clientWidth;
    WindowHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    WindowWidth = document.body.clientWidth;
    WindowHeight = document.body.clientHeight;
  }
	loadDiv=document.createElement("div");
	loadDiv.className = "loadDivContainer";
	loadDiv.id = "loadDivContainer";
	loadDiv.style.position = 'absolute';
	loadDiv.style.top = 0;
	loadDiv.style.left = 0;
	loadDiv.style.width = WindowWidth;
	loadDiv.style.height = WindowHeight;
	loadDiv.style.filter = 'Alpha(opacity=50)';
	loadDiv.style.opacity = 0.5;
	loadDiv.style.background = '#000000';
	document.body.appendChild(loadDiv);

	imgLeft = WindowWidth / 2;
	imgTop = WindowHeight / 2.6;
	var img=document.createElement('IMG');
	img.id = 'loaderImg';
	img.src = 'loader.gif';
	img.style.position = 'absolute';
	img.style.left=imgLeft;
	img.style.top=imgTop;
	document.body.appendChild(img);
	
}

function unloadLoader() {
  document.body.removeChild(document.getElementById('loadDivContainer'));
  document.body.removeChild(document.getElementById('loaderImg'));
}

    </script>

Hier noch die ajx.php

<?php
	if(preg_match("|\Ahttp://(www\.)?".$_SERVER['HTTP_HOST']."|", $_SERVER['HTTP_REFERER'])){
		sleep(2);
		$ajxData = $_POST;	
		echo main();
	}
	
	function main($ajxData) {
		global $ajxData;

		$modus = $ajxData['modus'];
		switch($modus) {
		
			case "addieren" :
				$content.= $ajxData['zahl1'] + $ajxData['zahl2'];
				return $content;
			break;

			case "subtrahieren" :
				$content.= $ajxData['zahl1'] - $ajxData['zahl2'];
				return $content;
			break;

			case "multiplizieren" :
				$content.= $ajxData['zahl1'] * $ajxData['zahl2'];
				return $content;
			break;

			case "dividieren" :
				$content.= $ajxData['zahl1'] / $ajxData['zahl2'];
				return $content;
			break;
		}		
	}

?>