Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1404 connectés 

  FORUM HardWare.fr
  Programmation
  PHP

  validation d'un formulaire ajax via la touche "entrée"

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

validation d'un formulaire ajax via la touche "entrée"

n°1755892
Profil sup​primé
Posté le 05-07-2008 à 15:15:13  answer
 

Bonjour, j'ai un formulaire très simple qui lorsqu'on clique sur "envoyer" via un onclick=unefonction() sur le bouton, j'arrive à intéragir avec le serveur sans recharger la page (c'est merveilleux).
Hélas quand je valide mon formulaire en appuyant sur la touche entrée (ce que je souhaite systématiser à terme) la page se recharge immédiatement après mes requêtes et donc évidemment les résultats ne s'affichent plus sur la page...
 
Est ce qu'il y a quelque chose à faire pour bloquer le rafraîchissement de la page ?
Voilà en gros la tête de mon formulaire histoire de vous donner une idée.
 

Code :
  1. <form name="reponse" method="POST" onsubmit="submitForm()" action="">
  2. <input type="text" name="rep" id="rep" />
  3. <input type="button" value="Submit" onclick="submitForm()">
  4. </form>


 
 
 
PS: Ca n'a strictement rien à voir mais lorsque j'essaie de poster depuis Firefox, au moment de valider mon message HFR me répond "Mot de passe incorrect !"
En revanche la même opération fonctionne très bien sous IE...


Message édité par Profil supprimé le 05-07-2008 à 15:17:09
mood
Publicité
Posté le 05-07-2008 à 15:15:13  profilanswer
 

n°1755894
bul3
Posté le 05-07-2008 à 15:25:35  profilanswer
 

bonjour,
pourquoi onsubmit sur le formulaire et
onclick sur le bouton submit ?
double emploi !

 

  1. <form name="reponse" method="POST" onsubmit="submitForm()" action="">
   2. <input type="text" name="rep" id="rep" />
   3. <input type="button" value="Submit" />
   4. </form>

 


et j'espère que dans la fonction il n'y a pas un document.reponse.submit() !!!
sinon, triple emploi !

 

en général d'ailleurs on fait onsubmit="return(submitForm());"
la fonction renvoyant true si l'envoi est requis,
false sinon ( en cas de contrôle quelconque dans cette
fonction par exemple )

 

là, d'ailleurs ça appelle la même page ( action="" ),
j'espère que c'est du php, sinon il faudrait le return false.

 


EDIT : je n'ai pas compris le rapport avec AJAX ?
ajax ce n'est pas l'envoi d'un formulaire !
donc si en plus, dans submitForm, on appelle ajax...
quadruple emploi !

 

Cordialement.


Message édité par bul3 le 05-07-2008 à 15:31:52

---------------
[mon site] [m'écrire]
n°1755899
Profil sup​primé
Posté le 05-07-2008 à 15:53:18  answer
 

J'ai d'abord récupéré un snippet qui proposait la validation du formulaire avec un événement "onclick" sur le bouton, puis j'ai essayé de l'adapter avec un onsubmit dans form, d'où le double emploi pour le moment car le onsubmit ne fonctionne pas pour l'instant.
Sinon, oui, dans submitform j'appelle Ajax.
 
Pour tes autres remarques, j'ai pas tout compris, est-ce que tu proposes une solution à mon problème ?

n°1755908
bul3
Posté le 05-07-2008 à 16:12:12  profilanswer
 

ah ben... alors si tu appelles AJAX ,
 
pas de onclick, fais un return false dans la fonction,
sinon ça soumet le formulaire !
 
je ne sais pas comment tu gères ajax dans cette fonction,  
mais on n'envoie pas un formulaire...
 
en ( très, très  ) gros
...xml.open("POST", "url", true);
...xml.send("paramètres séparés par &" );
...
 
faut voir ce que tu fais donc...


Message édité par bul3 le 05-07-2008 à 16:12:41

---------------
[mon site] [m'écrire]
n°1755912
Profil sup​primé
Posté le 05-07-2008 à 16:32:09  answer
 

Voilà où j'en suis
 
Mon formulaire

Code :
  1. <FORM name="reponse" method="POST" onSubmit="submitForm()" action="">
  2. <input style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:20pt;" type="text" name="rep" id="rep" />
  3. </FORM>


Le javascript

Code :
  1. function submitForm()
  2. {
  3. var req = null;
  4. document.getElementById("dyn" ).innerHTML ="Started...";
  5. if(window.XMLHttpRequest) req = new XMLHttpRequest();
  6. else if (window.ActiveXObject) req  = new ActiveXObject(Microsoft.XMLHTTP);
  7. req.onreadystatechange = function()
  8. {
  9.  document.getElementById("dyn" ).innerHTML ="Patienter...";
  10.  if(req.readyState == 4)
  11.  {
  12.   if(req.status == 200)
  13.   {
  14.        document.getElementById("dyn" ).innerHTML =req.responseText;
  15.   }
  16.   else
  17.   {
  18.    document.getElementById("dyn" ).innerHTML ="Error: returned status code " + req.status + " " + req.statusText;
  19.   }
  20.  }
  21. };
  22. var rep = document.reponse["rep"].value
  23. req.open("POST", "check.php?rep=" + rep, true);
  24. req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded" );
  25. req.send(null);
  26. return false;
  27. }


Je répète, ça part d'un snippet dont j'ai pompé la structure, faut pas trop m'en demander.
J'ai ajouté un petit return false à la fin, mais le formulaire est quand validé et la page est rechargée..

n°1755917
bul3
Posté le 05-07-2008 à 16:48:30  profilanswer
 

ah bon ?
 
pas trop le temps de décortiquer pourquoi ?
( curieux, mais bon, comme il reste des erreurs... )
 
enlêve les balises <form></form>
 
utilise document.getElementById("rep" ) au lieu de document.reponse.rep
 
...
var rep = document.getElementById("rep" ).value;
...
<input type="text" id="rep" />
<input type="button" value="Submit"  
          onclick="submitForm();" />
 
de plus : tu dis "post" et tu utilises comme avec get en fait !!
 
req.open("POST", "check.php", true);
req.send(rep);
 
je n'ai peut-être pas tout vu, mais
ça doit commencer à prendre forme,
et comme il n'y a plus de formulaire....
il ne sera pas envoyé ;o)
 
@+


Message édité par bul3 le 05-07-2008 à 16:49:31

---------------
[mon site] [m'écrire]
n°1755936
CyberDenix
Posté le 05-07-2008 à 20:08:51  profilanswer
 

Ouais mais c'est pas valide html/xhtml ce qui est proposé, là...
 
Peux être peux-tu poser un évènement onkeypress sur ta forme et intercepter via une fonction javascript le code de la touche du clavier qui est saisie (ya des tas de scripts qui font ça) et si le code == touche entrée, alors tu balances ta fonction javascript de vérification et tu fais un return false (pour ne pas envoyer le formulaire).


---------------
Directeur Technique (CTO)
n°1756121
Profil sup​primé
Posté le 06-07-2008 à 22:06:03  answer
 

J'ai réussi à faire ce que je voulais en combinant les informations de vos deux précieuses réponses.
Merci beaucoup !


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  PHP

  validation d'un formulaire ajax via la touche "entrée"

 

Sujets relatifs
Avoir le curseur dans un champ de formulaireNavigation en ajax dans un catalogue
[Résolu] Editeur wysiwyg dans un formulaire htmlValeur touche clavier
Formulaire HTML et transmission de donnéesformulaire php
AJAX ? Silverlight ? Flash ?[AJAX] Fonctionnement synchrone et envoi type POST sous IE
formatage formulaire contact[résolu] Erreur validation W3C
Plus de sujets relatifs à : validation d'un formulaire ajax via la touche "entrée"


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR