Validation de formulaire : comportement anormal ?

Bonjour,

Voici mon formulaire :

Code:

---

1 2 3 4 5

<form> Numéro de la revue : <input type="text" id="numero" onKeyPress="if(event.keyCode == 13){sommaire();}"> <input type="button" value="Afficher le sommaire" onClick="sommaire();" > </form>

---

Je voulais valider indifféremment avec le bouton ou entrée.
La fonction javascript sommaire() déclenche un appel ajax à un fichier php : j'ai vérifié (en posant quelques "alert" ) que dans les deux cas, l'url transmise à mon fichier php est identique.
Mais... avec le bouton, j'ai un retour normal, avec entrée, mon fichier php n'est pas atteint.
Voyez-vous où est mon erreur ?
Merci pour votre aide

Bonjour, si sommaire(); est appelé alors en faisant F12 depuis le navigateur puis dans réseau voir si l'appel à la page PHP est bien appelé avec les bon paramètres et surtout la réponse de cette page du obligatoirement soit généré du html en vue de parser directement du HTML sont des données JSON avec un header content type paramétré en JSON.
De plus nous ne savons pas ce que contient la fonction "sommaire" surement un appel ajax, ma fois mon aide se limite a extrapoler a défaut d'être plus précis.

Citation:

---

Envoyé par headmax

De plus nous ne savons pas ce que contient la fonction "sommaire" surement un appel ajax, ma fois mon aide se limite a extrapoler a défaut d'être plus précis.

---

Merci d'avoir répondu. Voici ma fonction sommaire(). Elle est très élémentaire. La validation par le bouton donne exactement la même valeur à url que la validation par entrée. J'ai vérifié avec un encodeURI avant l'envoi et il n'y a pas de caractère "parasite".
En bonne logique, la suite devrait aussi être la même : récupération des données. Mais non, la page php n'est pas sollicitée :j'ai mis un "echo 'ok'; die; " en début de cette page php, et ce "OK" s'affiche bien avec la validation bouton mais pas avec entrée. Je trouve ça très curieux.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

function sommaire(){ var url; var xhr = getXMLHttpRequest(); var text; var num=document.getElementById("numero").value.trim(); if(num==""){return;} xhr.onreadystatechange=function() { if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) { text=xhr.responseText; (... traitement des données...) } } var code=document.getElementById("code").value; url="../moteur/resulnum.php?revue=" + code + num + "&code=" + code; xhr.open("GET",url,true); xhr.send(); }

---

Salut

Je ne suis pas sûr d'avoir compris, le problème, c'est le déclenchement par la touche Entrée qui ne lance pas la function sommaire() ?
Si oui, peut être que

Code:

---

<input type="text" id="numero" onKeyPress="if(event.keyCode == 13 || event.which == 13){sommaire();}">

---

Bonjour et merci pour ta réponse.
Le déclenchement par la touche entrée ou par le bouton lancent tous les deux correctement la fonction sommaire().
Mais si je valide avec le bouton, l'appel Ajax se fait correctement et les données récupérées s'affichent bien sur la page html
En revanche, si je valide avec Entrée, l'appel Ajax ne se fait pas : avec un alert(url) ajouté dans le script juste avant xhr.open, je vois bien que l'url produite dans les DEUX CAS de validation est la même... Mais pourquoi diable avec Entrée je n'arrive pas à accéder à la page php appelée par Ajax ???

Salut on se sait pas si tu as plusieurs formulaires dans ta page, mais pour faire simple tu devrais supprimer ton JS inline onKeyPress="if(event.keyCode == 13 || event.which == 13){sommaire();} pour :

Code:

---

1 2 3 4 5 6 7 8 9

var numero = document.getElementById("numero");   numero.addEventListener('keypress', function(event) { if(event.keyCode == 13 || event.which == 13){ event.preventDefault(); document.querySelector('[type="button"]').click(); //le mieux met un id a ton button et utilise getElementById('id_du_button').click(); } });

---

Merci pour l'idée, headmax
J'ai suivi ce que tu m'as proposé au début, sous Chrome et F12: l'url est bien correctement transmise à la page php appelée par Ajax. Mais dans le cas d'une validation par Entrée, le retour est vide, alors qu'il est normal lorsque je valide avec le bouton.... Je vais suivre pas à pas la construction de la réponse Ajax pour tenter de voir où ça coince.
Par ailleurs, ta proposition me semble plus rationnelle : j'ai enlevé le javascript inline, donné un id au bouton ("ok"), et ajouté ta fonction à mon script :

Code:

---

1 2 3 4 5 6 7 8

var numero = document.getElementById("numero"); numero.addEventListener('keypress', function(event) { if(event.keyCode == 13 || event.which == 13){ event.preventDefault(); document.getElementById("ok").click(); } });

---

Mais sur Chrome, je vois : "sommaire2.js:44 Uncaught TypeError: Cannot read property 'addEventListener' of null"
Comme 'numero' est un input type text, est-ce que ça signifie qu'on ne peut pas mettre d'écouteur sur ce type d'élément ? Je peux peut-être le mettre sur la page entière ? (il n'y a qu'un seul formulaire)

Désolé pour le listener je vais opter pour la version oldschool :) alors :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

document.body.onload = function(){ //sans cette function tu aura surement ton erreur car la fonction JS et appelé avant que le DOM soit chargé.   var numero = document.getElementById("numero");   numero.onkeypress = function(event) { if(event.keyCode == 13 || event.which == 13){ event.preventDefault(); document.querySelector('[type="button"]').click(); //le mieux met un id a ton button et utilise getElementById('id_du_button').click(); } }; };

---

Sinon si tu souhaite utiliser avec la function addEventListener n'oublie pas de mettre une fonction pour savoir si ta page et chargé ou pas avec body.onload

Citation:

---

Envoyé par headmax

Désolé pour le listener je vais opter pour la version oldschool :) alors :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

document.body.onload = function(){ //sans cette function tu aura surement ton erreur car la fonction JS et appelé avant que le DOM soit chargé.   var numero = document.getElementById("numero");   numero.onkeypress = function(event) { if(event.keyCode == 13 || event.which == 13){ event.preventDefault(); document.querySelector('[type="button"]').click(); //le mieux met un id a ton button et utilise getElementById('id_du_button').click(); } }; };

---

---

J'ai suivi ton idée et ça marche ! Merci !
En fait, avec l'event sur l'input 'numero', ça ne fonctionnait pas, mais sur l'élément window ça va tout bien (sur ma page il n'y a pas d'autre possibilité d'utiliser Entrée).

Code:

---

1 2 3 4 5 6

window.onkeypress=function(e){if((e.keycode==13)||(e.which==13)){ e.preventDefault(); sommaire(); } };

---

Pour info : avec Chrome + F12 (merci aussi de me l'avoir fait découvrir), j'ai vu que la page php appelée par Ajax faisait bien son boulot, mais si la validation se faisait avec 'Entrée', l'appel avait le statut 'cancelled', ce qui explique, je pense, l'absence de retour dans la page HTML.
J'ai enuite mis la fonction dans mon script, mais au début, je n'avais pas mis la ligne e.preventDefault() parce que je ne voyais pas trop son utilité : l'appel Ajax était toujours 'cancelled'. L'ajout de la ligne a tout résolu, et ça marche sous Chrome, Firefox et IE.
Merci encore pour ton aide.

Bonjour,

c’est un peu bête de surveiller spécifiquement un keycode particulier sur un évènement particulier sur un input particulier, quand on sait que les formulaires HTML soumettent de base (sans JS) avec la touche entrée, en émettant un évènement submit. Pour empêcher le formulaire de déclencher le chargement d’une nouvelle page, il suffit d’annuler ce submit avec la méthode preventDefault.

Un exemple complet minimal :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Soumission de form avec entrée</title> </head> <body>   <form> <input /> </form>   <script> "use strict";   var leForm = document.querySelector("form"); leForm.addEventListener("submit", function (ev) {   ev.preventDefault();   console.log(ev); });   </script> </body> </html>

---

Ouvrez la console avec F12, cliquez dans l’input pour lui donner le focus, puis appuyez sur Entrée pour voir l’évènement dans la console.

J'y est pas pensé :aie: effectivement c'est plus simple, ça utilise très peu de ressource événementielle car window.onkeypress est en écoute a chaque fois que le client tape sur son clavier peu importe la touche il vérifie si la touche Enter est pressé, ton exemple laisse la nature des choses se réaliser et se concentre sur l’événement essentiel "onsubmit" ce qui représente inline <form onsubmit='return false;' ../>" d'un ou plusieurs formulaires et surtout ça fait le boulot avec un minimum et ne risque pas d’interagir entre formulaire, merci pour tes précisions ;).