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

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

Marsh Posté le 05-07-2008 à 15:15:13    

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
Reply

Marsh Posté le 05-07-2008 à 15:15:13   

Reply

Marsh Posté le 05-07-2008 à 15:25:35    

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]
Reply

Marsh Posté le 05-07-2008 à 15:53:18    

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 ?

Reply

Marsh Posté le 05-07-2008 à 16:12:12    

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]
Reply

Marsh Posté le 05-07-2008 à 16:32:09    

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..

Reply

Marsh Posté le 05-07-2008 à 16:48:30    

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]
Reply

Marsh Posté le 05-07-2008 à 20:08:51    

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)
Reply

Marsh Posté le 06-07-2008 à 22:06:03    

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

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed