[ajax?]

[FedeBev]

Salve a tutti,
suono nuovo del forum e avrei bisogno di una mano: sto realizzando un form di registrazione ed ho fatto la tabella, la funzione javascript che controlla i campi e, se i campi sono ok, invia il form a un php che controlla se lo username esiste già o meno, stesso discorso per la mail; se tutto è ok inserisce tutti i vari dati nel db (phpMyAdmin) ovviamente tramite query.
Ora io mi chiedo: è possibile fare i controlli username e password senza reindirizzare ad un php? Il php, in caso ci siano errori, reindirizza nuovamente al form di registrazione svuotando quindi i campi e obbligando a riscrivere tutto; il mio obiettivo è evitare questo.
Ho inoltre provato a seguire quanto detto qui: http://antirez.com/articoli/spaghettiajax.html come suggerito in un altra discussione su questo forum, ottenendo il risultato che funziona tranne per il "piccolo dettaglio" che non invia i dati registrandomi quindi un utente "fantasma"
Grazie in anticipo e spero di essere stato chiaro.

[OoZic]

HTML5, attributo 'required' + il tipo, supporta 'email', 'url' e altro.

qualche info in più: http://diveintohtml5.info/forms.html

codice:

<form action="#">
    <input type="text" required />
    <button type="submit">invia</button>
</form>

demo: http://jsfiddle.net/LCfkW/

per quanto riguarda il check dell'username devi per forza fare una chiamata ajax al backend che controlla se è già occupato.

una demo qui:
http://jsfiddle.net/Bjmre/

codice:

Codice PHP:

$('#signin').submit(function(e){

    // ferma il submit automatico
    e.preventDefault();
    
    // chiamata ajax al backend dove se l'username è libero risponde con un true altrimenti con un false
    $.ajax({
            type: 'GET',
            url: "http://controlla-username",
            success:function(data){
                
                // se la risposta è true porta l'utente alla pagina successiva
                if (data){
                    window.location = 'http://pagina-successiva';
                }
                
                // se la risposta è false, compare il messaggio che l'username non è disponibile
                else {
                    $('.error-text').html('l\'username non è disponibile');
                }
            }
    });
}); 


[Tuvok-LuR-]

Originariamente inviato da FedeBev

Ho inoltre provato a seguire quanto detto qui: http://antirez.com/articoli/spaghettiajax.html come suggerito in un altra discussione su questo forum, ottenendo il risultato che funziona tranne per il "piccolo dettaglio" che non invia i dati registrandomi quindi un utente "fantasma"

magari evita di seguire guide scritte 8 anni fa
le cose al giorno d'oggi sono molto più semplici per fortuna

puoi seguire vari approcci, il più semplice è verificare l'username all'invio del form, come in questo esempio (con jQuery):

<form action="#">
    <label>Username: <input required name="username" type="username" /></label>
    <label>Password: <input name="password" type="password" /></label>
    <button type="submit">invia</button>
</form>
<script>
  $('form').on('submit', function (e) {
      var $form = $(this);

      // Se il form non ha la classe "verified" annulliamo il suo invio ed effettuiamo la validazione
      if ( !$form.hasClass('verified') ) {		    	
        e.preventDefault();

      	// Così impediamo che l'utente cambi i valori mentre è in atto la validazione
      	$(':input', $form).prop('readonly', true);

      	// Inviamo il form allo script che controlla la validità dei campi
      	// come esempio può banalmente restituire le stringhe 'true' o 'false'
      	$.post('validateForm.php', $form.serialize(), function (isValid) {
          if (isValid) {
            // Aggiungiamo la classe verified e reinviamo il forum
            $form.addClass('verified').submit();
          } else {
            // Riattiviamo i campi del form
            $(':input', $form).prop('readonly', false);
            // Qua notificherai anche l'utente dell'errore
          }
      	}, 'json');	    	
      }
  });
</script>

Altri approcci possono variare, dalla validazione dell'username al volo mentre lo digiti, alla pressione di un bottone apposito che verifica l'username.

E ricordati di validare sempre e comunque una seconda volta i dati quando arrivano sul server con l'invio del form (ogni validazione javascript può essere vanificata da chi sa come farlo).

[FedeBev]

Originariamente inviato da OoZic

HTML5, attributo 'required' + il tipo, supporta 'email', 'url' e altro.

qualche info in più: http://diveintohtml5.info/forms.html

codice:

<form action="#">
    <input type="text" required />
    <button type="submit">invia</button>
</form>

demo: http://jsfiddle.net/LCfkW/

per quanto riguarda il check dell'username devi per forza fare una chiamata ajax al backend che controlla se è già occupato.

una demo qui:
http://jsfiddle.net/Bjmre/

codice:

Codice PHP:

$('#signin').submit(function(e){

    // ferma il submit automatico
    e.preventDefault();
    
    // chiamata ajax al backend dove se l'username è libero risponde con un true altrimenti con un false
    $.ajax({
            type: 'GET',
            url: "http://controlla-username",
            success:function(data){
                
                // se la risposta è true porta l'utente alla pagina successiva
                if (data){
                    window.location = 'http://pagina-successiva';
                }
                
                // se la risposta è false, compare il messaggio che l'username non è disponibile
                else {
                    $('.error-text').html('l\'username non è disponibile');
                }
            }
    });
}); 


Ti ringrazio per la risposta,
non mi è chiero come lavora lo script da te proposto: io ho un php che verifica se username e mail esistono già tramite una semplice query:
<?php
//connessione al db

$controllo=mysql_query("SELECT id FROM $tbl_name WHERE email_utente='$email' LIMIT 1");
$controllo2=mysql_query("SELECT id FROM $tbl_name WHERE username='$username' LIMIT 1");
if(mysql_num_rows($controllo) == 1)
{
echo ("Utente gia' registrato, e-mail gia' presente !");

}
elseif(mysql_num_rows($controllo2) == 1)
{
echo ("username già presente !");
}

else
{
mysql_query("INSERT INTO ".$tbl_name." (id,username,password,nome_utente,cognome_utente,email_utente,giorno_nascita_utente,mese_nascita_utente,anno_nascita_utente,indirizzo_utente,comune_utente,provincia_utente,cap_utente) VALUES (' ','$username','$password','$nome','$cognome','$email','$gg','$mm','$aaaa','$indirizzo','$comune','$provincia','$cap')",$db) || die(mysql_error());
// scrive la query per inserire i dati nel db
mysql_close($db);
echo("registrato") ;


}

?>

come interagisco tra i 2 script?
Grazie


EDIT: ho trovato questo che credo sia la via migliore
ho solo una domanda:
questo che diamine significa?
"oggettoAJAX=creaRichiestaAjax();"
per prima cosa suppondo si sia dimenticato un "var" davanti e poi creaRichiestaAjax() che senso ha?
Grazie per l'attenzione

[OoZic]

ho saltato un pezzo effettivamente per farti capire meglio:

javascript lato client provvede a fare una chiamata ajax "get" (o post come preferisci) e la parte che mi son scordato è passare i dati

...
            type: 'GET',
            url: "http://controlla-username",
            data: $('#formID').serialize(),
            success:function(data){
...

a quel punto nel backend c'è lo script php che esegue il controllo e ritorna qualcosa, io per semplicità avevo messo true/false ma se vuoi fare una cosa fatta bene potrebbe ritornare un json tipo

{
  "email":"okay",
  "username":"utilizzato"
}

quel che manca nel tuo script che non vedo è l'assegnazione delle variabili $email, $username.

dovrebbe prenderle dalle variabili che gli arrivano tramite chiamata get:

$email = $_GET["email"]

non sono un esperto di php cmq ... aspetta una conferma da qualcuno più esperto

[FedeBev]

Originariamente inviato da OoZic

ho saltato un pezzo effettivamente per farti capire meglio:

javascript lato client provvede a fare una chiamata ajax "get" (o post come preferisci) e la parte che mi son scordato è passare i dati

...
            type: 'GET',
            url: "http://controlla-username",
            data: $('#formID').serialize(),
            success:function(data){
...

a quel punto nel backend c'è lo script php che esegue il controllo e ritorna qualcosa, io per semplicità avevo messo true/false ma se vuoi fare una cosa fatta bene potrebbe ritornare un json tipo

{
  "email":"okay",
  "username":"utilizzato"
}

quel che manca nel tuo script che non vedo è l'assegnazione delle variabili $email, $username.

dovrebbe prenderle dalle variabili che gli arrivano tramite chiamata get:

$email = $_GET["email"]

non sono un esperto di php cmq ... aspetta una conferma da qualcuno più esperto

Perfetto ho capito il funzionamento dello script e ti ringrazio, l'ho provato ma non funziona
E' evidente che sbaglio qualcosa ma.. cosa?
qual è il principio di funzionamento di $('#signin').submit(function(e)...? Della stringa in particola intendo...
Potresti dirmi ancora cosa scrivere esattamente all'interno degli if del php?
ultima richiesta: potresti farmi un esempio super base di struttura della pagina di registrazione? magari capisco dove sbaglio...
P.S.: nel php la variabile $email=$_GET['email'] c'e', mi sono solo dimenticato di scriverla
Grazie mille per la grande disponibilità

[OoZic]

almeno per quanto riguarda html +js metti il codice qui:
http://jsfiddle.net/

poi vediamo di capire dove sbagli

[FedeBev]

ecco: http://jsfiddle.net/aRrw8/
Li non posso mettere (o non so come si fa) il php che è quello che più mi interessa...
te lo posto qui!

Codice PHP:

[php]
<?php
//parametri di connessione al db

$username = $_POST['username']; 
$password =md5($_POST['password']);
$check_password=md5($_POST['check_password']);
$nome=$_POST['nome'];
$cognome=$_POST['cognome'];
$email=$_POST['email'];
$check_mail=$_POST['check_mail'];
$gg=$_POST['gg'];
$mm=$_POST['mm'];
$aaaa=$_POST['aaaa'];
$indirizzo=$_POST['indirizzo'];
$comune=$_POST['comune'];
$provincia=$_POST['provincia'];
$cap=$_POST['cap'];

        $controllo=mysql_query("SELECT id FROM $tbl_name WHERE  email_utente='$email' LIMIT 1");
        $controllo2=mysql_query("SELECT id FROM $tbl_name WHERE  username='$username' LIMIT 1");
    if(mysql_num_rows($controllo) == 1)
        {
            echo "<script type=\"text/javascript\">alert(\"Utente gia' registrato, e-mail gia' presente !\"); history.go(-1)</script>";
      
        }
    elseif(mysql_num_rows($controllo2) == 1)
        {
            echo "<script type=\"text/javascript\">alert(\"Username gia' presente, scegliene un altro !\"); history.go(-1)</script>";
        }

    else
        {
        mysql_query("INSERT INTO ".$tbl_name." (id,username,password,nome_utente,cognome_utente,email_utente,giorno_nascita_utente,mese_nascita_utente,anno_nascita_utente,indirizzo_utente,comune_utente,provincia_utente,cap_utente) VALUES (' ','$username','$password','$nome','$cognome','$email','$gg','$mm','$aaaa','$indirizzo','$comune','$provincia','$cap')",$db) || die(mysql_error());  
        // scrive la query per inserire i dati nel db 
        mysql_close($db); 
        echo("<SCRIPT LANGUAGE='JavaScript'>
                            window.alert('Registrazione avvenuta con successo')
                            window.location.href='http://www.makingall.altervista.org/login.php';
                            </SCRIPT>") ;

        }
?>

[/php]

ora nel js tu vedi la tua funzione dentro l'else (cosa che suppongo sia sbagliata) ma ho provato anche a metterla fuori ma non funziona comune, a te la parola... grazie ancora

[OoZic]

ho dato un occhiata molto veloce e la prima cosa che ti posso dire è che non stai allegando jQuery, almeno in quel fiddle non c'è quindi suppongo non ci sia nemmeno nel tuo codice.

Per far "funzionare" quei comandi con il dollaro davanti $, serve jQuery che è una libreria javascript separata.

http://jquery.com/

dovresti allegarla in fondo prima di chiudere il </body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
    window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')
    </script>