Formulaire de contact ajax

Par barpoi78, il y a 8 ans

PHP Wordpress

Bonjour,

J'essaie de faire un formulaire de contact ajax sur mon thème one page perso et j'ai une erreur que je ne vois pas

Version 4.9.5

//Pour éviter les conflits jQuery, ne pas saisir ni le $ ni Document.ready jQuery("#mailForm").submit(ajaxSubmit); function ajaxSubmit(){ var nouveauMail = jQuery(this).serialize(); jQuery.ajax({ url: 'wp-admin/admin-ajax.php',//Pour envoyer un formulaire via worpress type: 'POST', data: {action="my_action", 'formData': nouveauMail},//Pour envoyer les données sérializées success(function(donnees) { jQuery('#confirmation').html(donnees); } )}); return false; }

Ce que je veux

Je cherche à envoyer un mail sans recharger la page

Ce que j'obtiens

Dans la console, cela m'affiche: Uncaught SyntaxError: Unexpected token function
sur cette ligne: success(function(donnees) {

Pour tant, je ne vois aucune erreur après avoir passé en revue le code de nombreuses fois mais voilà, je ne suis pas fortiche en ajax. Je vous remercie de votre aide.

14 réponses

Psylozoff, il y a 8 ans

C'est sensé être quoi success..?? Une propriété de l'objet que tu veux passer à jQuery.ajax? Parce qu'une prop ça se présente de cette façon :

{ prop : value }
barpoi78, il y a 8 ans

Apparemment success fait partie de data. C'est ce que dit le formateur (elephorm) et comme il n'y a pas de forum chez eux c'est pas terrible.

Psylozoff, il y a 8 ans

T'as pas un lien?? Ton code est juste mal-formé... Tu ne parviens pas à le voir? Tu as écris :

{ prop : value, prop : value, prop : value, value }
Psylozoff, il y a 8 ans

Donc tu ne fermes pas data où il faudrait..? Tu le fermes avant success... Et j'imagine que success est le nom de la prop... Et "action=" ça va pas le faire non plus ^^'

Lartak, il y a 8 ans

Bonsoir.
Psylozoff t'a donné la solution, ton problème se situe en fait dans la ligne précédente, soit data: {action="my_action", 'formData': nouveauMail},.
Plus précisément dans la définition de la propriété action, le signe à utiliser est : et non =, il te faut donc remplacer par data: {action: "my_action", 'formData': nouveauMail},.

Psylozoff, il y a 8 ans

@Lartak, il n'y a pas que ça :-s Juste après l'objet data, sa fonction success n'est associé à aucun nom de propiété... J'imagine que la solution ressemblera à "success: () => {}" mais je ne connais pas le framework qu'il utilise..!

Lartak, il y a 8 ans

Il utilise jQuery comme Framework JavaScript, par contre, si la version utilisé est égale ou supérieure à la 3.0, le callback success est supprimé depuis la version 3.0.

Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are removed as of jQuery 3.0. You can use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.

Il faudrait donc remplacer par :

function ajaxSubmit(){ var nouveauMail = jQuery(this).serialize(); jQuery.ajax({ url: 'wp-admin/admin-ajax.php',//Pour envoyer un formulaire via worpress type: 'POST', data: { action: "my_action", 'formData': nouveauMail }//Pour envoyer les données sérializées }).done(function(donnees) { jQuery('#confirmation').html(donnees); }); return false; }
barpoi78, il y a 8 ans

Merci à vous d'avoir répondu. C'est vrai que la version de jQuery que j'utilise est 3.3.1 alors j'ai essayé come me l'a conseillé Lartak en refermant une parenthèse au dessus de return fales et malgré tout, j'ai l'erreur ici maintenant:

).done(function(donnees) {

et l'autocompletion de sublime text ne m'aide pas vraiment car apparemment c'est pour l'ancienne version de jQuery.

function ajaxSubmit(){ var nouveauMail = jQuery(this).serialize(); jQuery.ajax({ url: 'wp-admin/admin-ajax.php',//Pour envoyer un formulaire via worpress type: 'POST', data: { action: "my_action", 'formData': nouveauMail },//Pour envoyer les données sérializées ).done(function(donnees) { jQuery('#confirmation').html(donnees); } )}; return false; }
Psylozoff, il y a 8 ans

Tu vois vraiment pas le problème??

}, //Pour envoyer les données sérializées )
Psylozoff, il y a 8 ans

Je te suggère de toujours bien mettre en forme ton code... Ca t'aidera! Aligne toujours l'ouverture et la fermeture des blocs...

function ajaxSubmit() { var nouveauMail = jQuery(this).serialize(); jQuery.ajax( { url: 'wp-admin/admin-ajax.php', type: 'POST', data: { action: "my_action", formData: nouveauMail }, ).done(function(donnees) { //double ouverture, donc... jQuery('#confirmation').html(donnees); }) //double fermeture! }; return false; }

Et les problèmes apparaitront clairement :-s

barpoi78, il y a 8 ans

Je fais comme ça et je n'ai plus d'erreur, mais cela ne fonctionne pas:

function ajaxSubmit(){ var nouveauMail = jQuery(this).serialize(); jQuery.ajax({ url: 'wp-admin/admin-ajax.php',// Pour envoyer un formulaire via worpress type: 'POST', data : { action : "my_action", 'formData' : nouveauMail },// Pour envoyer les données sérializées }) .done(function (donnees) { jQuery('#confirmation').html(donnees); }) return false; }
Psylozoff, il y a 8 ans

Elle sert à quoi ta virgule?

},// Pour envoyer les données sérializées

Il sert à quoi ton return false?

barpoi78, il y a 8 ans

Oui la virgule est en trop et le return false c'est pour ne pas soumettre le formulaire.

Psylozoff, il y a 8 ans

La question à 20 000€ ce serait : "est-ce que tu as cherché de façon logique avant de débarquer ici..?"
Si c'est le cas, tu as forcément consulté cette page : http://api.jquery.com/jquery.ajax/
Et donc tu as déjà la solution depuis longtemps...