[SPIP Zone] Double clique de formulaire

Salut à tous et toutes,

sur un site d'association, nous avons souvent des gens qui envoie en double voire en triple exemplaire leur réponse de formulaire.

On a parlé de cela l'autre jour sur IRC et il semble que ce soit un problème récurrent.

L'idée que j'avais était de proposer un plugin qui aurait une fonction somple : désactiver l'input du formulaire après le premier envoi. On active le plugin, et ca marche. On désactive, et on revient à un comportement standard.

L'idée étant de permettre que ce besoin éditorial n'implique pas d'avoir des compétences d'intégrateurices, et de faciliter la vie des gens.

Mes questions sont donc
  1. Qu'en pensez vous?
  2. Quelle solution technique préconorisieriz vous?

Amicalement

Maïeul

Bonsoir

Beau projet et je pense qu’il faut le faire en jsvia le pipeline mais cela doit sortir que dans une page avec un formulaire à mon avis.

Le mer. 10 avr. 2019 à 16:34, Maïeul <maieul@maieul.net> a écrit :

Salut à tous et toutes,

sur un site d’association, nous avons souvent des gens qui envoie en
double voire en triple exemplaire leur réponse de formulaire.

On a parlé de cela l’autre jour sur IRC et il semble que ce soit un
problème récurrent.

L’idée que j’avais était de proposer un plugin qui aurait une fonction
somple : désactiver l’input du formulaire après le premier envoi. On
active le plugin, et ca marche. On désactive, et on revient à un
comportement standard.

L’idée étant de permettre que ce besoin éditorial n’implique pas d’avoir
des compétences d’intégrateurices, et de faciliter la vie des gens.

Mes questions sont donc

  1. Qu’en pensez vous?
  2. Quelle solution technique préconorisieriz vous?

Amicalement

Maïeul


spip-zone@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-zone

Le 10/04/2019 à 16:33, Maïeul a écrit :

sur un site d'association, nous avons souvent des gens qui envoie en double voire en triple exemplaire leur réponse de formulaire.
On a parlé de cela l'autre jour sur IRC et il semble que ce soit un problème récurrent.
L'idée que j'avais était de proposer un plugin qui aurait une fonction somple : désactiver l'input du formulaire après le premier envoi. On active le plugin, et ca marche. On désactive, et on revient à un comportement standard.
L'idée étant de permettre que ce besoin éditorial n'implique pas d'avoir des compétences d'intégrateurices, et de faciliter la vie des gens.
Mes questions sont donc
1. Qu'en pensez vous?
2. Quelle solution technique préconorisieriz vous?

Pierrox avait évoqué l'emploi de la classe loading qui sert pour les formulaires ajax
cf `{ajax}` pour les `inclure` - SPIP
« Le hit ajax relance automatiquement le calcul du squelette inclus seul en restaurant son #ENV, et en y ajoutant les paramètres passés dans l’url du lien. Le bloc rechargé passe en opacité 50 % et prend la class loading pendant le chargement ce qui permet de le styler à sa convenance. »

Simplement en le stylant .loading en css
- avec "pointer-events: none;" sur les submit (Can I use... Support tables for HTML5, CSS3, etc)
- avec "cursor: wait;" sur le form

JL

Le 10/04/2019 à 19:02, JLuc a écrit :

Le 10/04/2019 à 16:33, Maïeul a écrit :

sur un site d'association, nous avons souvent des gens qui envoie en double voire en triple exemplaire leur réponse de formulaire.
On a parlé de cela l'autre jour sur IRC et il semble que ce soit un problème récurrent.
L'idée que j'avais était de proposer un plugin qui aurait une fonction somple : désactiver l'input du formulaire après le premier envoi. On active le plugin, et ca marche. On désactive, et on revient à un comportement standard.
L'idée étant de permettre que ce besoin éditorial n'implique pas d'avoir des compétences d'intégrateurices, et de faciliter la vie des gens.
Mes questions sont donc
1. Qu'en pensez vous?
2. Quelle solution technique préconorisieriz vous?

Pierrox avait évoqué l'emploi de la classe loading qui sert pour les formulaires ajax
cf `{ajax}` pour les `inclure` - SPIP
« Le hit ajax relance automatiquement le calcul du squelette inclus seul en restaurant son #ENV, et en y ajoutant les paramètres passés dans l’url du lien. Le bloc rechargé passe en opacité 50 % et prend la class loading pendant le chargement ce qui permet de le styler à sa convenance. »

Simplement en le stylant .loading en css
- avec "pointer-events: none;" sur les submit (Can I use... Support tables for HTML5, CSS3, etc)
- avec "cursor: wait;" sur le form

JL

----
spip-zone@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-zone

mais du coup ca conditionne aux formulaires ajax non?
je pensais du coup à un jquery du type décrit ici

Le 10/04/2019 à 16:33, Maïeul a écrit :

Salut à tous et toutes,

sur un site d'association, nous avons souvent des gens qui envoie en double voire en triple exemplaire leur réponse de formulaire.

On a parlé de cela l'autre jour sur IRC et il semble que ce soit un problème récurrent.

L'idée que j'avais était de proposer un plugin qui aurait une fonction somple : désactiver l'input du formulaire après le premier envoi. On active le plugin, et ca marche. On désactive, et on revient à un comportement standard.

L'idée étant de permettre que ce besoin éditorial n'implique pas d'avoir des compétences d'intégrateurices, et de faciliter la vie des gens.

Mes questions sont donc
1. Qu'en pensez vous?
2. Quelle solution technique préconorisieriz vous?

Amicalement

Maïeul

----
spip-zone@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-zone

Selon Preventing Double Form Submission < JavaScript | The Art of Web
la 1ere ou 2eme solution me paraissent convenir mais pas forcément en intégrant l'action du onsubmit() directement dans le html du <form> mais plutôt via un js spécifique qui cible plus précisément le(s) formulaire(s) pouvant poser problème.

je pensais du coup à un jquery du type décrit ici
javascript - Prevent double submission of forms in jQuery - Stack Overflow

Bon, ma réponse est passée après mais l'idée du plugin jquery décrit dans le thread me parait pas mal.
Mais il faudrait quand même pouvoir cibler plus "mieux" les formulaires qui en ont besoin, à moins de forcer l'application sur tous les formulaire du site (?)

Le 10/04/2019 à 20:07, Chourak a écrit :

je pensais du coup à un jquery du type décrit ici
javascript - Prevent double submission of forms in jQuery - Stack Overflow

Bon, ma réponse est passée après mais l'idée du plugin jquery décrit dans le thread me parait pas mal.
Mais il faudrait quand même pouvoir cibler plus "mieux" les formulaires qui en ont besoin, à moins de forcer l'application sur tous les formulaire du site (?)

ah non pas tous les formulaires moi j'ai besoin du double voir triple clic sur un formulaire

--

----
En répondant a ce courriel vous acceptez implicitement la diffusion, l'échange de la conversation, sauf avis contraire clairement exprimé.

Le 10/04/2019 à 16:33, Maïeul a écrit :

Salut à tous et toutes,

sur un site d'association, nous avons souvent des gens qui envoie en double voire en triple exemplaire leur réponse de formulaire.

On a parlé de cela l'autre jour sur IRC et il semble que ce soit un problème récurrent.

L'idée que j'avais était de proposer un plugin qui aurait une fonction somple : désactiver l'input du formulaire après le premier envoi. On active le plugin, et ca marche. On désactive, et on revient à un comportement standard.

L'idée étant de permettre que ce besoin éditorial n'implique pas d'avoir des compétences d'intégrateurices, et de faciliter la vie des gens.

Mes questions sont donc
1. Qu'en pensez vous?
2. Quelle solution technique préconorisieriz vous?

Je gère un truc comme ça sur un site qui a des formulaires avec de l'upload de fichiers.
Les gens cliquaient souvent deux fois parce que rien n'indiquait un upload en cours.
Donc deux réponses enregistrées, et en plus ça devait leur bouffer encore plus de bande passante en upload, donc ralentir encore.

J'ai donc un bout de jquery qui passe les buttons et les input[type="submit"] en disabled au moment du subit du formulaire.
Ça ajoute une classe sur le form lui même et sur les boutons.
Dans mon cas, je passe les buttons en gris, avec une petite roue qui tourne à côté du libellé du bouton.

En gros :

$('form.js-disable-after, .formulaire_formidable').submit(function(event) {
   $(this).find('input[type="submit"], button[type="submit"]').addClass('js-sending').attr('disabled', 'disabled');
});

.js-sending {
   padding-left: 34px;
   background: gray url(../images/ajax-loader-gris.gif) 6px center no-repeat !important;
}

--
nicod_

Sur les formulaires ajax ça peut être un double clic, mais la soumission multiple existait déjà avant l’ajax, et peut donc aussi se produire sur du non ajax (parce que la réponse est longue l’utilisateur fait retour arrière et reclique par exemple) et là le js ne suffit pas…

Pour info il y a un mécanisme anti soumission multiple sur le formulaire de forum, mais pas sur qu’il soit généralisable…

--
Cédric
Le 10 avr. 2019 à 20:36 +0200, nicod_ <nicod@lerebooteux.fr>, a écrit :

Le 10/04/2019 à 16:33, Maïeul a écrit :
> Salut à tous et toutes,
>
> sur un site d'association, nous avons souvent des gens qui envoie en
> double voire en triple exemplaire leur réponse de formulaire.
>
> On a parlé de cela l'autre jour sur IRC et il semble que ce soit un
> problème récurrent.
>
> L'idée que j'avais était de proposer un plugin qui aurait une fonction
> somple : désactiver l'input du formulaire après le premier envoi. On
> active le plugin, et ca marche. On désactive, et on revient à un
> comportement standard.
>
> L'idée étant de permettre que ce besoin éditorial n'implique pas d'avoir
> des compétences d'intégrateurices, et de faciliter la vie des gens.
>
> Mes questions sont donc
> 1. Qu'en pensez vous?
> 2. Quelle solution technique préconorisieriz vous?

Je gère un truc comme ça sur un site qui a des formulaires avec de
l'upload de fichiers.
Les gens cliquaient souvent deux fois parce que rien n'indiquait un
upload en cours.
Donc deux réponses enregistrées, et en plus ça devait leur bouffer
encore plus de bande passante en upload, donc ralentir encore.

J'ai donc un bout de jquery qui passe les buttons et les
input[type="submit"] en disabled au moment du subit du formulaire.
Ça ajoute une classe sur le form lui même et sur les boutons.
Dans mon cas, je passe les buttons en gris, avec une petite roue qui
tourne à côté du libellé du bouton.

En gros :

$('form.js-disable-after, .formulaire_formidable').submit(function(event) {
$(this).find('input[type="submit"],
button[type="submit"]').addClass('js-sending').attr('disabled', 'disabled');
});

.js-sending {
padding-left: 34px;
background: gray url(../images/ajax-loader-gris.gif) 6px center
no-repeat !important;
}

--
nicod_
----
spip-zone@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-zone

Le 11/04/2019 à 00:17, Cerdic a écrit :

Sur les formulaires ajax ça peut être un double clic, mais la soumission multiple existait déjà avant l’ajax, et peut donc aussi se produire sur du non ajax (parce que la réponse est longue l’utilisateur fait retour arrière et reclique par exemple) et là le js ne suffit pas…

Pour info il y a un mécanisme anti soumission multiple sur le formulaire de forum, mais pas sur qu’il soit généralisable…

Je ne parlais pas du tout de formulaires ajaxés en particulier, mais de tous les formulaires :slight_smile:
Quand tu as submité, ça disable les boutons, donc tu ne peux plus les cliquer, ajaxés ou pas.

--
nicod_