Oppure, se vuoi toglierti di mezzo jQuery...
codice:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento HTML</title>
<script type="text/javascript">
var btnClick = (function () {
function AJAXSuccess () {
document.getElementById("risultato").value = this.responseText;
oGhost.parentNode && document.body.removeChild(oGhost);
}
function AJAXError (oError) {
alert("Chiamata fallita, si prega di riprovare...");
oGhost.parentNode && document.body.removeChild(oGhost);
}
var oGhost = document.createElement("div"), oContainer = document.createElement("div"), oWhait = new Image();
oGhost.id = "ghost";
/* inserisci qui l'url dell'immagine di attesa.... */
oWhait.src = "https://www.google.it/images/srpr/logo4w.png";
oContainer.appendChild(oWhait);
oGhost.appendChild(oContainer);
return function () {
var oReq = new XMLHttpRequest();
oReq.onload = AJAXSuccess;
oReq.onerror = AJAXError;
oReq.open("post", "mailurltrovata.php", true);
oReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
oReq.send("url=" + escape(document.getElementById("url").value) + "&numpag=" + escape(document.getElementById("numpag").value));
oGhost.parentNode || document.body.appendChild(oGhost);
};
})();
</script>
<style type="text/css">
#ghost {
position: fixed;
left: 0;
top: 0;
display: table;
background-color: #000000;
opacity: 0.5;
vertical-align: middle;
width: 100%;
height: 100%;
}
#ghost div {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100%;
height: 100%;
}
#ghost div img {
display: block;
margin: auto;
}
</style>
</head>
<body>
<form name="tuoForm">
URL: <input type="text" name="indirizzo" id="url" />
Numero di pagina: <input type="text" name="pagina" id="numpag" /></p>
<textarea id="risultato"></textarea></p>
<input type="button" id="bottone" value="Cliccami" onclick="btnClick();" /></p>
</form>
</body>
</html>