11484 sujets

JavaScript, DOM et API Web HTML5

Validation de saisie dans un champ de formulaire <input>

Bonjour,

Je rencontre le problème suivant :

J'ai créé un formulaire (dynamique) qui liste le contenu d'un panier et comporte une ou plusieurs lignes d'informations dont un champ <input type=text" onchange="mon JScript" Value="la quantité actuelle" size=1>

Ma fonction JavaScript effectue un window.location.assign(href) où href passe trois paramètres à ma page (du genre index.php?tache=modification&pan_id=102&quantite=5 ).

Le problème que je rencontre se situe au niveau de la validation du champ de saisie et ne se produit que lorsque mon formulaire ne comporte qu'une ligne (donc un seul champ input [hormis les champs "hidden"]). Lorsque le formulaire comporte plus d'une ligne, tout fonctionne comme il se doit.

La fonction window.location.assign(href) du JavaScript ne passe pas les paramètres lorsque le champ input a été validé avec la touche <Entrée> du clavier. Par contre, si ce champ est validé par la touche <Tabulation>, cela fonctionne. Il faut savoir que l'évènement "onChange" fonctionne correctement et appelle bien la fonction JS avec les bons paramètres.

Je ne vois pas où se situe le problème. Je mets ci-après le code du formulaire et du JavaScript (les deux lignes 'alert' et la ligne 'beep' en retrait servent à la mise au point uniquement).

Si quelqu'un pouvait m'aider, ce serait sympa.

D'avance merci de votre soutien.

Jean-Claude.


<script language="javascript">
function modif_qte(s, pan_id) {
var quantite = s.value;
  beep(100,660,50);
  alert('obj name=' + s.name + ' ; qte=' + quantite + ' ; pan_id=' + pan_id);
href = 'index.php?module=panier&tache=modification&pan_id=' + pan_id + '&quantite=' + quantite;
  alert(href);
window.location.assign(href);
}
</script>

<h2><u>Votre panier</u></h2>
<p>
 <FORM action="index.php" method="post" name="panier">
  <INPUT name="module" type=hidden value="panier">
  <INPUT name="tache" type=hidden value="modification">
  <table border="1" align="center" width="100%" class="panier" cellspacing="1">
   <tr>
    <th width="15%">&nbsp;</th>
    <th width="50%">Produit</th>
    <th align="center">Quantité</th>
    <th width="10%" style="text-align:right; margin-right:10px;">Prix unitaire&nbsp;</th>
    <th align="right" width="12%" style="text-align:right; margin-right:10px;">Prix TTC&nbsp;</th>
   </tr>
   <tr class="ligne_panier">
    <td align="center">
     <a href="index.php?module=panier&tache=suppression&pan_id=102">Supprimer</a>
    </td>
    <td>
     &nbsp;Mon bouquin
    </td>
    <td align="center">
     <input TYPE="text" onchange="javascript:modif_qte(this,102)" NAME="pan_id_102" size="1" VALUE="9">
    </td>
    <td align="right" style="text-align:right; margin-right:10px;">
     16.00 &euro;&nbsp>
    </td>
    <td align="right" style="text-align:right; margin-right:10px;">
     144.00 &euro;&nbsp;
    </td>
   </tr>
   <tr class="ligne_total">
    <td class="ligne_total" colspan="2" align="right">
     Total&nbsp;
    </td>
    <td class="ligne_total" align="right" style="text-align:right; margin-right:10px;">
     9 article(s)&nbsp;
    </td>
    <td class="ligne_total">
     &nbsp;
    </td>
    <td class="ligne_total" align="right" style="text-align:right; margin-right:10px;">
     144.00 &euro;&nbsp;
    </td>
   </tr>
  </table>
 </form>
 <br>
 <table width="100%">
  <tr>
   <td align="center" width="15%">
    <a href="index.php?module=panier&tache=vider">Vider le panier</a>
   </td>
   <td align="center" style="font-size:16px">
    <strong><a href="index.php?module=commande">&gt;&gt; Commander </a></strong>
   </td>
  </tr>
 </table>
</p>
Bonjour JClaude66700,
Il y a un truc que je ne comprend pas, pourquoi tu fais window.location.assign(href);
alors qu'il se suffit d'envoyer ton formulaire en méthode get et en modifiant légèrement ton formulaire.
Y a un truc, que j'ai pas compris ?

<form action="index.php" method="get" name="panier">
  <input name="module" type=h"idden" value="panier">
  <input name="tache" type="hidden" value="modification">
  <input name="name" type="hidden" value="pan_id_102">
  <input name="pan_id" type="hidden" value="102">
  <input name="quantite" type="text" size="1" VALUE="9">
</form>
Bonjour,


Je passe par un Javascript parce qu'il s'agit d'un champ "TEXT" et que mon formulaire ne se valide que par la méthode "POST".
Mon bouton "Submit" est plus bas dans mon formulaire.
Bonjour JClaude66700,

Je ne comprends toujours pas, ou y vraiment un truc que ne je vois pas...
Je t'ai fait un exemple avec la méthode get avec un target=_blank pour voir les paramètres
https://codepen.io/Zonecss/pen/moQBpO
On obtient le même résultat que window.location.assign , qui recharge toute la page d'après mes tests.
Au pire quant tu clique sur ton bouton submit tu mets le formulaire en post
ou inversement comme dans l'exemple.

@JENCAL : si tu te mets dans le champ qté. et que tu fais "ENTRE" c'est le form qui est posté en non le window.location.assign(href); qui est déclenché
Tu n'as pas cela ?

J'avais découvert cela suite à un ticket
https://openclassrooms.com/forum/sujet/questionnaire-web-sur-smartphone
https://codepen.io/Zonecss/pen/MGEKdq
Je vous remercie de vos réponses.

Mais ma question est que si je n'ai qu'une seule ligne de produits affichée, donc un seul champ input, le comportement du formulaire est différent : pour que la fonction JS de l'évènement onchange fonctionne correctement en totalité (c'est à dire qu'elle passe bien les paramètres au window.assign), il faut quitter le input par une tabulation. En quittant avec Entrée, ça ne fonctionne pas.

J'aimerais bien comprendre pourquoi, même si ma méthode n'est pas la plus élégante pour valider le changement de valeur dans le formulaire.
Sujet clos
Aller à