Discussion :

[bonjourajax]

Bonjour à tous,

Le problème, malgré e.preventDefault()
Je peux envoyer le formulaire plusieurs fois, avant de recevoir la réponse du formulaire, si je clique plusieurs fois avant de la recevoir (sur un input type="submit")
Et je reçois donc 3 fois la réponse

Comme si le e.preventDefault() s'annulait à partir de l'envoi de la requête $.ajax

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
$('#form').submit(function(e) {
	e.preventDefault()
 
	envoi=$(this).serialize()
 
	$.ajax({
    url : 'http:...php',
    type : 'POST',
    data : envoi,
    dataType : 'text',
    success : function(rep){
      alert(rep);
    }
  });
});

J'ai aussi essayé avec la fonction one()

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
$('#form').one('submit', function(e) {
	e.preventDefault()
       envoi=$(this).serialize()
 
$.ajax({
    url : 'http:...php',
    type : 'POST',
    data : envoi,
    dataType : 'text',
    success : function(rep){
      alert(rep);
    }
  });
});

Et avec one() cela ne désactive pas le bouton si je clique plusieurs fois, la requete n'est pas envoyée

Notez qu'il s'agit d'un envoi cross-domain, si cela affecte quelque chose.
Cordialement

[psychadelic]

e.preventDefault() permet d'arréter la propagation d'un évenement, ici c'est le clik souris, ou la touche enter, etc..

en activant le submit de ton formulaire, il se passe un premier event dans ta fonction jquery, puis ensuite elle se propage au formulaire sur lequel il va chercher à exécuter ce qu'il trouve dans l'attribut action="...
Si c'es un click souris, celui ci se propagera ensuite sur mettons le div qui porte le formulair, etc, jusqu'a la derniere couche du DOM, cad l'élémént HTML lui même
e.preventDefault() sert à arrêter cet enchaînement d'events.


ta fonction utilise un appel ajax, c'est à dire une fonction asynchrone, ou si tu préfère une tache en parallèle.

une fois l'appel lancé, l'interpréteur continu son bonhomme de chemin, et n'attend pas le résultat de ton appel ajax, il peut donc continuer à traiter l'ensemble des events pouvant survenir dans ta page, y compris un nouveau submit de ton formulaire, qui à son tour enverra un second appel ajax, etcc

Tu a de multiples solutions pour empcher ce genre d'appels multiples, mais i tu veux rester ergonomique, il faut :
1) désactiver le "bouton" du submit,
2) envoyer un message indiquant que ce traitement est en cours, message, sablier, animation, à ton choix
3) réactiver le bouton en cas aussi bien en cas d'échec avec nouveau message d'explication) ou en cas de réussite, en général la présentation des donnés suffit, mais tu peux aussi ajouter un message
4) avoir enlevé le message d'attente, évidement

[bonjourajax]

Merci pour cette réponse rapide
Je vais essayer et je te tiens au courant.
Cordialement

Edit : cela ne fonctionne toujours pas

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
$('#form').submit(function(e) {
	e.preventDefault();
	envoi=$(this).serialize();      
        $('input[name=submit]').val('chargement ...');
        $('input[name=submit]').setAttribute('disabled','disabled');
 
	$.ajax({
    url : 'http:...php',
    type : 'POST',
    data : envoi,
    dataType : 'text',
    success : function(rep){
      alert(rep);
    },
    error : function(rep) {
      alert(rep);
      $('input[name=submit]').removeAttribute('disabled');
      $('input[name=submit]').val('envoyer');
    },
   timeout:'5000'
  });
});

L'envoi ne se fait pas

[psychadelic]

le code que tu présente est trop partiel pour savoir ce qui peut coincer...

tu utiliser comme base le code qui "marchait" avant, et lui ajouter les 4 fonctions que je t'ai indiqué.

ton appel php, il renvoie juste du texte ? alor utilise plutôt un fetch (c'est mon grand leitmotiv)

[bonjourajax]

Le code fonctionne sauf
En ayant tester les trucs un par un
Le seul truc qui bloque l'envoi du formulaire c'est cette ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$('input[type=submit]').setAttribute('disabled','disabled');

Oui mon appel php renvoie

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<?php 
header('Content-Type: text/plain;');
?>

Comment cela avec du fetch je suis débutant en js?
Cordialement

[psychadelic]

fetch:
https://developer.mozilla.org/en-US/.../API/Fetch_API

exemples:
https://github.com/mdn/fetch-examples

attention fecth n'est pas suporté sur les anciens navigateurs, au besoin utiliser le polyfill indiqué dans la doc.

et j'aurais plutôt codé :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

$(this).setAttribute('disabled','disabled');