Bonjour à tous,

J'utilise actuellement Wordpress et pour mes formulaires Gravity Form, et j'ai voulu afficher les messages d'erreur ou les messages de succès dans un popup lors du clic sur le bouton du formulaire sans recharger la page.

Pour afficher les popups j'utilise également SweetAlert (https://sweetalert2.github.io).

Tout fonctionne bien lors de l'envoi sauf que par exemple si je remplis pas le formulaire correctement le popup s'affiche bien, je clique donc sur ok le popup se ferme jusqu'a la normal, mais si je veut reessayer de renvoyer l'envoi du formulaire le bouton du formulaire n'est plus cliquable.

Je pense que mon e.preventDefault et mal placé ?

Voici mon code:

jQuery('form').on('submit', function(e){
		
	e.preventDefault();
		
	// Obtenir l'ID du formulaire pour l'URL de soumission
	var formID = jQuery(this).attr('id');
	formID = formID.replace('gform_', '');
	var formURL = '/gravityformsapi/forms/'+formID+'/submissions';

	// Obtenir les données du formulaire et les formater en JSON
	var formArray = jQuery(this).serializeArray();
	var formData = [];
	jQuery.each(formArray, function(index, data) {
		var name = data['name'];
		var value = data['value'];
		formData[name] = value;
	});
	formData = jQuery.extend({}, formData);
	var data = { input_values : formData };
	
	// AJAX pour soumettre le formulaire
	jQuery.ajax({
		url: formURL,
		method: 'POST',
		data: JSON.stringify(data),
	}).done(function (data, textStatus, xhr) {
		// Ceci est le code HTML qui est généré dans le cadre du message de confirmation
		if(data.response.is_valid) {
			Swal.fire({title: 'Succès!', text: 'Do you want to continue', icon: 'success', confirmButtonText: 'OK'});
		} else {
			//jQuery('div.gform_validation_errors').css("visibility", "hidden");
			Swal.fire({title: 'Erreur!', text: data.response.validation_messages, icon: 'error', confirmButtonText: 'OK'});
		}
		console.log(data);
	});
});

Merci pour votre aide bonne soirée !!!

Bonjour, le preventDefault et placé correctement (en haut de la fonction de rappel) la méthode preventDefault ne fait qu'annulé le comportement par défaut de l'événement (pour un événement submit il annule l'envoi des données à la source cela permet la requête AJAX) ce n'est pas le preventDefault qui peut être responsable du fait que le bouton du formulaire n'est plus "cliquable" après le premier click, c'est surement un autre écouteur d'événement qui et attaché sur le submit du formulaire où sur le click du bouton qui pour une raison où une autre la mit en disabled j'imagine si il n'est plus cliquable.

Tu peut faire un click droit sur le bouton d'envoie du formulaire avant qu'il soit "non-cliquable" regardé les class et attributs qu'il possède puis envoyé le formulaire et regardé le changement de class et/où d'attributs sur le bouton, comme le code que tu as montré n'interagit ni avec des class ni avec un attribut disabled il ne peut pas être responsable de ce comportement là.

Pour corrigé le problème tu doit trouvé le fichier et donc le code responsable du comportement.

A noté que dans le code que tu nous à montré tu ne control pas les cas d'erreurs de la requête, via la méthode fail si tu n'as pas la console de développement ouverte tu ne verras pas l'erreur.

 jQuery.ajax({
        url: formURL,
        method: 'POST',
        data: JSON.stringify(data),
    })
    .done(function (data, textStatus, xhr) {
    	// ici la requête à reçue une réponse du serveur
    
        // Ceci est le code HTML qui est généré dans le cadre du message de confirmation
        if(data.response.is_valid) {
            Swal.fire({title: 'Succès!', text: 'Do you want to continue', icon: 'success', confirmButtonText: 'OK'});
        } else {
            //jQuery('div.gform_validation_errors').css("visibility", "hidden");
            Swal.fire({title: 'Erreur!', text: data.response.validation_messages, icon: 'error', confirmButtonText: 'OK'});
        }
        console.log(data);
	})
    .fail(function(jqXHR, textStatus, errorThrown) {
    	// ici la requête à échoué
        // errorThrown receives the textual portion of the HTTP status, such as "Not Found" or "Internal Server Error."
        console.warn(`request fail with: ${textStatus} => ${errorThrown}`);
        Swal.fire({title: 'Oops!', text: "Went wrong error...", icon: 'error', confirmButtonText: 'OK'});
    });

Bonjour,

Merci pour ta réponse j'ai donc ajouter la méthode fail qui ne me renvoit aucune erreur.

J'ai donc vérifier le bouton avant et apres l'envoi du formulaire et rien ne change ni avec les class ni avec un attribut disabled.

Voici la source du bouton

https://jsfiddle.net/5pxao82e/ je t'envoi ce lien parce que impossible de mettre du code html sans erreur de leur forum.

EDIT: J'ai rajouter jQuery(".gform_button").prop("onclick", null).off("click"); et cela fonctionne es ce la bonne solution ?.

Merci beaucoup pour ton aide.

-
Edité par staff 29 octobre 2021 à 11:51:19

Bonjour, la première partie du code que tu as ajouté:

jQuery(".gform_button").prop("onclick", null);

Supprime l'écouteur de click sur le bouton (celui qui et placé au niveau de l'attribut HTML) soit ce code là:

="if(window['gf_submitting_1']){return false;}  if( !jQuery('#gform_1')[0].checkValidity || jQuery('#gform_1')[0].checkValidity()){window['gf_submitting_1']=true;} "

Ce code ne manipule pas des éléments natif du navigateur, je ne c'est pas vraiment ce qu'il fait (il doit être fournit par ton plugin de formulaire wordpress).

Je crois qu'il essaie de vérifié si tous les champs sont remplie/valide avant d'autorisé le click sur le bouton du formulaire. Visiblement ce code ne doit pas être optimale si il ne fonctionne pas lorsque la page n'est pas rechargé après la soumission du formulaire.

Le .off("click") supprime tous les autres écouteurs de click sur le bouton si c'est l'écouteur de click qui et placé au niveau du HTML qui et responsable tu doit pouvoir réduire le code que tu as ajouté à seulement:

 jQuery(".gform_button").prop("onclick", null);

EDIT: 

-"impossible de mettre du code html sans erreur de leur forum."
Oui il faut retiré les noms d'événement Javascript du code HTML pour que le forum valide le post ces à cause des attributs "onclick", "ontruc" que le post et bloqué. Une technique consiste à faire une faute dans le nom de l'événement du genre "on-click" pour que le poste soit validé. C'est un problème du forum qui à été remonté plusieurs fois mais pour l'instant il et pas réglé.

-
Edité par SamuelGaborieau3 31 octobre 2021 à 7:14:22