Fenêtre de confirmation

Version imprimable

Bonjour,

J'ai un formulaire de devis que l'utilisateur complète.
Un code Javascript fait les calculs (qté, tva etc...)
Un bouton submit envoie ensuite mon formulaire vers une page php pour l'inscription dans une BDD.

Je me suis apperçu que certains utilisateurs avaient la fâcheuse habitude d'utiliser la touche "Enter" pour passer d'un champs à l'autre. Résultat le formulaire était envoyé avant d'être finalisé.

J'aimerais donc soit désactiver momentanément "Enter" soit faire apparaître une fenêtre de confirmation de manière à annuler avant envoi.

J'ai essayé ça mais ça ne fonctionne pas:
La fenêtre apparaît mais que l'on choisisse OK ou annuler le formulaire est envoyé.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function verifjs() { return window.confirm('Voulez-vous vraiment envoyer le devis?'); } function soumettre_form() { if ( document.forms.form1.totalgeneral.value == 0 ) { window.location.replace('epro_afficher_liste_preference.php'); alert ("Vous n'avez rien commandé !\n => commande non soumise") ; return false ; } else { // Les 2 lignes ci-dessous devraient être activées pour réellement passer le form. à script CGI document.form1.method = "post" ; document.form1.action = "insert_entree_offre.php" ; document.close () ; return true ; } }
mon bouton submit:(je vous fais grâce des km de formulaires)
Code:

1 2 <INPUT TYPE="SUBMIT" VALUE=" Enregistrer l'offre " onClick="verifjs()"> </form>

26/02/2013, 00h35
SylvainPV

Bonjour,

Utilise plutôt l'attribut onsubmit sur l'élément form plutôt que onclick sur l'input submit. Tu couvriras ainsi tous les moyens de soumettre le formulaire, y compris la touche Entrée. Ensuite dans la fonction verifjs, plutôt qu'un message de confirmation tu peux parcourir les champs du formulaire et vérifier qu'ils ne sont pas vides ou au mauvais format. Enfin il existe en HTML5 des attributs required à ajouter à tes input. Le formulaire sera bloqué au submit automatiquement tant que ces champs ne seront pas renseigné.
26/02/2013, 07h21
andry.aime

Bonjour,

Cette ligne n'est pas bon:

Citation:

document.forms.form1.totalgeneral.value

Code:

document.forms["form1"].totalgeneral.value

Et ensuite

Code:

<form onsubmit=" return verifjs();">

A+.
26/02/2013, 09h12
kiyeko

Citation:

Envoyé par SylvainPV

Bonjour,

Utilise plutôt l'attribut onsubmit sur l'élément form plutôt que onclick sur l'input submit. Tu couvriras ainsi tous les moyens de soumettre le formulaire, y compris la touche Entrée. Ensuite dans la fonction verifjs, plutôt qu'un message de confirmation tu peux parcourir les champs du formulaire et vérifier qu'ils ne sont pas vides ou au mauvais format. Enfin il existe en HTML5 des attributs required à ajouter à tes input. Le formulaire sera bloqué au submit automatiquement tant que ces champs ne seront pas renseigné.

Merci pour tes conseils,
J'ai un script plus haut qui vérifie chaque champs imputés avec onblur avant de faire le calcul de la ligne. Ca c'est OK.
Je ne peux pas faire de "required", l'utilisateur n'est pas obligé de tout remplir, mais si il en rempli 1 il faut qu'il soit bien fait. Mais tout ça fonctionne. C'est juste cette µ*ù^*%# de touche Enter qui m'enbête.
Je vais essayer vos conseils.
26/02/2013, 10h26
SylvainPV

Citation:

Envoyé par andry.aime

Bonjour,

Cette ligne n'est pas bon:

Code:

document.forms.form1.totalgeneral.value

Code:

document.forms["form1"].totalgeneral.value

Pardon mais quelle est la différence entre ces lignes ? Pour moi elles ont exactement le même sens.
26/02/2013, 11h11
andry.aime

Citation:

Envoyé par SylvainPV

Pardon mais quelle est la différence entre ces lignes ? Pour moi elles ont exactement le même sens.

C'est différent, forms est un tableau, il n'a pas de propriété form1 mais.

Re,

Citation:

Code:

1
2
3
4
5
 if ( document.forms.form1.totalgeneral.value == 0 ) { // à part ma remarque précédente, value est un String et 0 est un entier.
        window.location.replace('epro_afficher_liste_preference.php'); // ça va rediriger la page.
	alert ("Vous n'avez rien commandé !\n => commande non soumise") ;
        return false ;
    }

A+.

26/02/2013, 20h13
SylvainPV

Citation:

Envoyé par andry.aime

C'est différent, forms est un tableau, il n'a pas de propriété form1 mais.

C'est effectivement une Array mais on lui attribue également les attributs name des formulaires pour y accéder. Les deux lignes sont équivalentes, ça constitue les deux moyens d'accéder à une propriété d'un objet :

http://jsfiddle.net/DUun5/
26/02/2013, 21h17
Bovino

Andry, forms n'est pas exactement un tableau, c'est plus précisément une collection. Elle possède donc certaines propriétés spécifiques comme l'indique SylvainPV et parmi celles-ci, l'accès direct possible à ses membres.