pagina di attesa dopo submit

[crissss]

ciao a tutti ho creato un form che esegue dei calcoli dai dati inseriti dall'utente, vorrei che dopo aver cliccato invia (submit) l'utente venga reindirizzato ad una pagina con una gif animata per l'attesa con un tempo da me prefissato e solo dopo vengano visualizzati i dati, come si puo fare?

[Alhazred]

Basta che metti l'immagine nello script che riceve i dati della form e poi metti un redirect usando il tag <meta refresh... > impostandolo col tempo che vuoi attendere.

Comunque se tale attesa non ha un serio motivo di esserci sarebbe sconsigliato metterla, tutte le attese snervano gli utenti e se sono troppe li spingono ad abbandonare il sito per cercare qualcosa di simile altrove.

[crissss]

ma poi non andrà in loop?

[m3rlobunk3r]

Ciao crissss,

hai gia pensato di utilizzare AJAX ?

Invii i dati a php in modo asincrono e mostri l'immagine mentre attendi la risposta..

Supponendo di usare Jquery (per scriverlo in poche righe ma potresti usare benissimo qualsiasi classe o scriverla da 0) ti scrivo un esempio indicativo:

nella pagina hai 3 campi con id :

un_campo_di_testo

unaltro_campo_di_testo

id_field_risultato

e l'immagine nascosta tramite display:none; con id id_immagine_da_mostrare

In javascript

function calcola(){

val_1 = Document.getElementById("un_campo_di_testo").value;
val_2 = Document.getElementById("unaltro_campo_di_testo").value;

Document.getElementById("id_immagine_da_mostrare").style.display = "block";

$.ajax({
  url: 'calcola.php?val_1=' + val_1 + '&val_2=' + val2,
  success: function(data) {
    calocla_resp(data);
  }
});

// se metti "return calcola" all'onsubmit del form il return false previene il submit.
return false; 

}

function calcola_resp(data){

   var res = 0;
   
   //nascondi l'immagine
   Document.getElementById("id_immagine_da_mostrare").style.display = "none";
   
   try{
    eval(data);
   }catch (error){
     alert("errore qui : " + data);
   }

   Document.getElementById("id_field_risultato").value = res;


}

//in calcola.php

//php dovra' dare in output SOLO codice javascript valido in questo caso.
echo "res = ". ($_REQUEST['val_1'] + $_REQUEST['val_2]').";" 

Spero di esserti stato utile...

[crissss]

Originariamente inviato da m3rlobunk3r
Ciao crissss,

hai gia pensato di utilizzare AJAX ?

Invii i dati a php in modo asincrono e mostri l'immagine mentre attendi la risposta..

Supponendo di usare Jquery (per scriverlo in poche righe ma potresti usare benissimo qualsiasi classe o scriverla da 0) ti scrivo un esempio indicativo:

nella pagina hai 3 campi con id :

un_campo_di_testo

unaltro_campo_di_testo

id_field_risultato

e l'immagine nascosta tramite display:none; con id id_immagine_da_mostrare

In javascript

function calcola(){

val_1 = Document.getElementById("un_campo_di_testo").value;
val_2 = Document.getElementById("unaltro_campo_di_testo").value;

Document.getElementById("id_immagine_da_mostrare").style.display = "block";

$.ajax({
  url: 'calcola.php?val_1=' + val_1 + '&val_2=' + val2,
  success: function(data) {
    calocla_resp(data);
  }
});

// se metti "return calcola" all'onsubmit del form il return false previene il submit.
return false; 

}

function calcola_resp(data){

   var res = 0;
   
   //nascondi l'immagine
   Document.getElementById("id_immagine_da_mostrare").style.display = "none";
   
   try{
    eval(data);
   }catch (error){
     alert("errore qui : " + data);
   }

   Document.getElementById("id_field_risultato").value = res;


}

//in calcola.php

//php dovra' dare in output SOLO codice javascript valido in questo caso.
echo "res = ". ($_REQUEST['val_1'] + $_REQUEST['val_2]').";" 

Spero di esserti stato utile...

ho provato a seguire il tuo consiglio ma non ci sono riuscito, potresti mandarmi un esempio con un form? so di chiedere molto ma da soli è difficile imparare!

[m3rlobunk3r]

Ti scirvo il codice di un form, per farti capire, ma non te lo do come funzionante perché
non l'ho testato e comunque non credo che fornirti il codice pronto sia lo scopo.

<form onsubmit="return calcola()">

   <input type="text" id="un_campo_di_testo" />+
   

   

   <input type="text" id="unaltro_campo_di_testo" />=
   

   <hr />
   

   <input type="text" id="id_field_risultato" />
   
   
   <input type="submit" value="Calcola la somma">

</form>

Il principio di funzionamento e' questo:

L'utente scrive i valori nel form.

Usi javascript per recuperare tali valori.

Poi invii i valori ad una pagina php utlizzando AJAX.

La pagina php che hai fatto tu ti restituisce "qualcosa" che hai definito tu,
nell'esempio che ti ho mostrato restituisce codice javascript che andrai ad eseguire (eval),
ma potrebbe restituire anche codice html da schiantare nella pagina oppure cavoli e patate,
non importa, la cosa importante è che ti fornisce un metodo per ottenere dati dalle pagine php senza ricaricare l'intera pagina, e gestendo eventuali ritardi ecc..

E' uno strumento potente e ti consiglio di studiarlo se non lo conosci perché ti da grandi possibilità..

A questo scopo ti consiglio questa guida per iniziare:

http://javascript.html.it/guide/leggi/95/guida-ajax/

Se vuoi approfondire mandami un PM che ti giro una buona classe AJAX

[crissss]

ho letto la guida fino a questo esempio ma non ho capito granchè, potresti darmi una base funzionante su cui lavorare?

[crissss]

ho trovato questo solo come posso fare per far vedere i risultati in una nuova pagina?

<html>
<head>
<script type="text/javascript" src="js/jquery/jquery-1.3.2.js"></script><script type="text/javascript">
$(document).ready(function() {
$('#preloader').hide();
$('#preloader')
.ajaxStart(function(){
//hides the button
$('#submitBTN').hide();
//show preloader
$(this).show();
}).ajaxStop(function(){
//hides preloader on complete
$(this).hide();
//shows button again
$('#submitBTN').show();
});
$('#form form').submit(function(){
$('#return').empty();
//data.php is the processsing script
$.get('data.php', $(this).serialize(), function(data){
$('#return').html(data);
});
return false;
});
});
</script>

</head>
<body>
<div id="form">
<form id="myform">
name : <input type="text" name="name">

age : <input type="text" name="age">

<input type="submit" name="submit" value="Submit" id = "submitBTN" ><div id="preloader">[img]/img/ajax_progress2.gif[/img] Loading...</div>
</form>
</div>
<div id="return"></div>

</body>
</html>

[crissss]

up!