Ajax et OnSubmit
Résolu/Fermé
rbinou59
Messages postés
116
Date d'inscription
samedi 31 janvier 2009
Statut
Membre
Dernière intervention
18 septembre 2011
-
Modifié par rbinou59 le 13/10/2010 à 22:35
A.Nonymous - 22 oct. 2011 à 00:25
A.Nonymous - 22 oct. 2011 à 00:25
9 réponses
Comme je disais il y a 1 an : dans un mode asynchrone, la fonction "na_valid_pseudo" ne peut à la fois lancer l'appel AJAX et retourner le statut de la réponse de cet appel. Il faut définir une fonction dite de "callback" qui reprendra les traitements une fois la réponse reçue, comme il était déjà proposé ici, mais les différents "return true" et "return false" ne servent à rien en mode asynchrone.
Il faut donc forcer dans un 1er temps l'arrêt de la soumission du formulaire, puis lancer l'appel AJAX, puis en fonction de la réponse reçue, relancer une soumission de formulaire.
Une solution un peu moins bricolée serait de faire ainsi :
<form method="post" onsubmit="return verifForm();" id="myForm">
<input type="submit" value="Envoyer" />
</form>
function ajaxEnvoi()
{
[...]
xhr.onreadystatechange = function()
{
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0))
{
var res_verif=xhr.responseText;
if(res_verif=="exist")
{
document.getElementById('error_exist_pseudo').style.display = 'inline' ;
}
else
{
document.getElementById('error_exist_pseudo').style.display = 'none';
document.getElementById('myForm').removeAttribute('onsubmit');
document.getElementById('myForm').submit();
}
}
}
[...]
}
function verifForm()
{
ajaxEnvoi();
return false;
}
---------------
Au passage, j'en profite pour évoquer un plugin jQuery qui permet la soumission de formulaire en AJAX (ou Iframe, suivant les besoins) : http://jquery.malsup.com/form/
Il faut donc forcer dans un 1er temps l'arrêt de la soumission du formulaire, puis lancer l'appel AJAX, puis en fonction de la réponse reçue, relancer une soumission de formulaire.
Une solution un peu moins bricolée serait de faire ainsi :
<form method="post" onsubmit="return verifForm();" id="myForm">
<input type="submit" value="Envoyer" />
</form>
function ajaxEnvoi()
{
[...]
xhr.onreadystatechange = function()
{
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0))
{
var res_verif=xhr.responseText;
if(res_verif=="exist")
{
document.getElementById('error_exist_pseudo').style.display = 'inline' ;
}
else
{
document.getElementById('error_exist_pseudo').style.display = 'none';
document.getElementById('myForm').removeAttribute('onsubmit');
document.getElementById('myForm').submit();
}
}
}
[...]
}
function verifForm()
{
ajaxEnvoi();
return false;
}
---------------
Au passage, j'en profite pour évoquer un plugin jQuery qui permet la soumission de formulaire en AJAX (ou Iframe, suivant les besoins) : http://jquery.malsup.com/form/
duplex13
Messages postés
1
Date d'inscription
vendredi 21 octobre 2011
Statut
Membre
Dernière intervention
21 octobre 2011
1
21 oct. 2011 à 19:35
21 oct. 2011 à 19:35
Bonjour,
Même si le sujet date d'une année, il n'est pas fermé et j'ai eu le même problème que j'ai réussit à contourner.
Dans mon cas, j'ai un formulaire d'inscription et je veux vérifier que le nom d'utilisateur n'est pas déjà pris sur le onBlur du champ pseudo et sur le onSubmit du formulaire.
Sur le onBlur, on peut utiliser Ajax comme tu le fais et ça fonctionne.
Sur le onsubmit, on ne peut pas utiliser un appel asynchrone, mais il suffit de tester le contenu du span d'erreur (id = error_exist_pseudo) qui reste non vide si l'appel du onBlur a renvoyé une erreur du fait que l'utilisateur est déjà pris.
J'ai donc modifié la fonction de vérification via Ajax (na_valid_pseudo dans ton cas) en ajoutant un flag "utiliseAjax" comme paramètre. Dans le cas du onBlur, il est à 1 et on fait l'appel Ajax, dans le cas du onSubmit, il est à 0 et il suffit de tester si le span est vide ou non.
En utilisant Prototype
var monSpan = $('error_exist_pseudo');
return monSpan.empty();
Ça implique de modifier ton code pour remplir le span en cas d'erreur au lieu d'utiliser la propriété display. Ça se fait facilement avec Prototype :
var monSpan = $('error_exist_pseudo');
monSpan.update("Ce nom d'utilisateur est déjà utilisé");
En espérant que cette réponse ne soit pas trop confuse et puisse aider d'autres développeurs. Les solutions les plus simples sont souvent les meilleures.
Vincent
Même si le sujet date d'une année, il n'est pas fermé et j'ai eu le même problème que j'ai réussit à contourner.
Dans mon cas, j'ai un formulaire d'inscription et je veux vérifier que le nom d'utilisateur n'est pas déjà pris sur le onBlur du champ pseudo et sur le onSubmit du formulaire.
Sur le onBlur, on peut utiliser Ajax comme tu le fais et ça fonctionne.
Sur le onsubmit, on ne peut pas utiliser un appel asynchrone, mais il suffit de tester le contenu du span d'erreur (id = error_exist_pseudo) qui reste non vide si l'appel du onBlur a renvoyé une erreur du fait que l'utilisateur est déjà pris.
J'ai donc modifié la fonction de vérification via Ajax (na_valid_pseudo dans ton cas) en ajoutant un flag "utiliseAjax" comme paramètre. Dans le cas du onBlur, il est à 1 et on fait l'appel Ajax, dans le cas du onSubmit, il est à 0 et il suffit de tester si le span est vide ou non.
En utilisant Prototype
var monSpan = $('error_exist_pseudo');
return monSpan.empty();
Ça implique de modifier ton code pour remplir le span en cas d'erreur au lieu d'utiliser la propriété display. Ça se fait facilement avec Prototype :
var monSpan = $('error_exist_pseudo');
monSpan.update("Ce nom d'utilisateur est déjà utilisé");
En espérant que cette réponse ne soit pas trop confuse et puisse aider d'autres développeurs. Les solutions les plus simples sont souvent les meilleures.
Vincent
Alain_42
Messages postés
5361
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
894
Modifié par Alain_42 le 13/10/2010 à 23:24
Modifié par Alain_42 le 13/10/2010 à 23:24
tu vérifies déjà le pseudo sur le onblur par la fonction na_valid_pseudo(this)
alors pourquoi appelles tu la même fonction au submit ?
ta fct devrait plutôt être ainsi:
alors pourquoi appelles tu la même fonction au submit ?
ta fct devrait plutôt être ainsi:
function verifForm(f) { if(f.pseudo.value==""){ alert("Veuillez remplir correctement tous les champs"); return false; //on sort de la fonction } //si on arrive la c'est qu'il n'y a pas d'erreur donc: return true; }
rbinou59
Messages postés
116
Date d'inscription
samedi 31 janvier 2009
Statut
Membre
Dernière intervention
18 septembre 2011
3
16 oct. 2010 à 10:42
16 oct. 2010 à 10:42
C'est vrai que c'est une solution que j'avais envisagé mais le problème c'est que mes fonction (na_valid_...) ne fond pas que renvoyer true ou false elle permette aussi d'afficher les petits message d'erreur c'est pour sa que je doit faire appelle a elle au moment ou je valide mon formulaire
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Concernant la partie AJAX du test, pour rappel, le 1er signifie Asynchronous, autrement dit Asynchrone.
Ainsi, une fonction qui inclut un appel AJAX ne peut retourner la réponse de l'appel AJAX (à moins de parades hideuses, tels que "Tant que pas de réponse, boucler").
Il est possible d'utiliser le XmlHttpRequest en mode synchrone, mais cela donne une expérience utilisateur plutôt moyenne.
Pour rester en mode Asynchrone, plutôt que de faire un "return true", fais un "return false" dans tous les cas, et un "f.submit()" quand toutes les répondes AJAX auront été reçues et considérées valides.
Ainsi, une fonction qui inclut un appel AJAX ne peut retourner la réponse de l'appel AJAX (à moins de parades hideuses, tels que "Tant que pas de réponse, boucler").
Il est possible d'utiliser le XmlHttpRequest en mode synchrone, mais cela donne une expérience utilisateur plutôt moyenne.
Pour rester en mode Asynchrone, plutôt que de faire un "return true", fais un "return false" dans tous les cas, et un "f.submit()" quand toutes les répondes AJAX auront été reçues et considérées valides.
rbinou59
Messages postés
116
Date d'inscription
samedi 31 janvier 2009
Statut
Membre
Dernière intervention
18 septembre 2011
3
16 oct. 2010 à 18:49
16 oct. 2010 à 18:49
Merci de ta réponse mais je ne suis pas un AS en JavaScript et je n'est pas tout compris dans ta réponse pourrai tu la re-précisé si il te plait (surtout la fin)
Merci
Merci
Si tu souhaites un exemple de code, précises la manière dont tu fais tes appels AJAX (si utilisation de JQuery, Prototype ou autre ... ou rien de tout ça ... )
rbinou59
Messages postés
116
Date d'inscription
samedi 31 janvier 2009
Statut
Membre
Dernière intervention
18 septembre 2011
3
17 oct. 2010 à 12:08
17 oct. 2010 à 12:08
Je n'utilise rien de tout sa, voila un de mes appelle ajax :
Merci pour ton aide
document.getElementById('error_long_pseudo').style.display = 'none'; var xhr = getXMLHttpRequest(); var pseudo_verif = encodeURIComponent(champ.value); xhr.open("POST", "script/verif_pseudo_exist.php", true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send("pseudo_verif="+pseudo_verif); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) { var res_verif=xhr.responseText; if(res_verif=="exist") { document.getElementById('error_exist_pseudo').style.display = 'inline' ; return false; } else { document.getElementById('error_exist_pseudo').style.display = 'none'; return true; } } };
Merci pour ton aide
rbinou59
Messages postés
116
Date d'inscription
samedi 31 janvier 2009
Statut
Membre
Dernière intervention
18 septembre 2011
3
20 oct. 2010 à 20:52
20 oct. 2010 à 20:52
Up, j'ai toujours pas de solution, s'il vous plait Help Me :)