View Full Version : [ajax?]
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.
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:
$('#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-
08-01-2014, 01:48
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 :D
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).
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:
$('#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
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 :D
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 :D
Perfetto ho capito il funzionamento dello script e ti ringrazio, l'ho provato ma non funziona :muro:
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à :D
almeno per quanto riguarda html +js metti il codice qui:
http://jsfiddle.net/
poi vediamo di capire dove sbagli ;)
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!
<?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>") ;
}
?>
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
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>
vBulletin® v3.6.4, Copyright ©2000-2025, Jelsoft Enterprises Ltd.