Form login dinamico

Ho una form di login. Quando l'utente clicca su OK vorrei che venisse richiamato lo script che controlla i dati del login e in caso di successo vorrei che il form fosse sostituito da un messaggio (ad esempio "benvenuto $utente"). Il tutto senza ricaricare la pagina (cambiando solo il form). Come faccio?

per sapere qualdo si clicca sul pulsante "submit" e quindi quando si vuole inviare i dati della pagina, puoi utilizzare l'evento onSubmit.

Per far visualizzare il messaggio senza ricaricare la pagina, devi utilizzare AJAX, oppure facilitandoti la vita con jQuery.

Ovviamente per modificare un valore nella pagina (ad esempio un testo dentro un div...), da JS normale puoi utilizzare

Codice:

---

document.getElementById('nome_id').innerHTML = "Benvenuto!";

---

..oppure, più semplicemente, sempre tramite jQuery :wink:

Ciao!

Preferirei AJAX.
Cosa metto nell'onSubmit?

una funzione che, quando invocata, utilizza ajax, no?

Tipo:

Codice HTML:

---

[...]
<form onsubmit='funzione()'>[...]</form>
[...]
<script>
function funzione()
{
    richiesta ajax

    aggiorna le scritte...
}
</script>
[...]

---

Ciao!

D'accordo ma siccome non sono ferrato in AJAX mi potresti abbozzare la funzione?

Sinceramente ajax non lo uso da parecchio... l'ho usto soltanto epr il sito alemoppo...

Adesso uso jQuery che è molto più facile e più pulito...

Comunque, se non ricordo male, in ajax era una cosa del genere:

Codice HTML:

---

document.getElementById('<nome_div>').innerHTML = "Caricamento in corso; attendere...";
                var myRequest = null;
                function CreateXmlHttpReq(handler) {
                        var xmlhttp = null;
                        try {
                                xmlhttp = new XMLHttpRequest();
                        } catch(e) {
                                try {
                                                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                                } catch(e) {
                                                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                                }
                        }
                        xmlhttp.onreadystatechange = handler;
                        return xmlhttp;
                }
               
                function funzione()
                {
                        if(myRequest.readyState == 4 && myRequest.status == 200)
                        {
                                document.getElementById('<nome_div>').innerHTML = "Operazione avvenuta!";
                        }
                }
                myRequest = CreateXmlHttpReq2(funzione);
                myRequest.open("POST","pagina.php?valore=x&rand="+Math.random());
                myRequest.send(null);

---

...il Math.random() ci va per IE, perché lui nota che fai una stessa richiesta uguale alla precedente e quindi non la esegue nemmeno ritornando il valore della richiesta vecchia...

p.s. molto probabilmente non funziona... l'ho riguardato dal mio sito (alemoppo)...

Comunque io l'ho imparato dalla pagina linkata sopra...

E comunque, jQuery è parecchio più semplice :wink:

Ciao!

Supponiamo di non doverci preoccupare della compatibilità del browser con ajax.

Codice:

---

var ajax=new XMLHttpRequest();

---

Ora devo inviare nome utente e password letti dal form allo script php che verifica i dati...come proseguo?

Stiamo facendo confusione. Ajax non è un linguaggio a sè stante e nemmeno jQuery.

Ajax è una tecnologia utilizzata per creare applicazioni dinamiche.
jQuery è un framework javascript, che come ha detto alemoppo è facile da utilizzare ma soprattutto è cross-browser.

Quindi la scelta non è ajax o jquery, ma framework o non framework...

non voglio utilizzare framework, infatti stavo cercando di costruire il codice da zero (con il vostro aiuto) :)