[AJAX] Soumettre le contenu d'un formulaire à deux endroits

**jbqueromes** · 25/11/2014, 16h14

Bonjour,

Je suis plutôt novice en jquery, ajax, mais ai quelques notions en HTML. J'espère que le cas précis dans lequel je suis n'a pas déjà fait l'objet d'un sujet (j'ai pas mal cherché). si c'est le cas, veuillez m'en excuser d'avance.

Mon problème est le suivant : je fais remplir un formulaire à mes clients sur mon site, et je souhaiterais que, lorsqu'en cliquant sur le bouton "send request", il se produise 2 actions :

un envoi d'email à l'administrateur du site (moi), avec le contenu du formulaire
un renvoi de l'utilisateur vers la page paypal de payment, en postant le contenu du même formulaire
Après pas mal de recherches ici ou là, j'ai cru comprendre qu'il fallait insérer dans le header de mon HTML une fonction Jquery qui envoie en asynchronisé via ajax le formulaire d'abord vers le fichier php "reserve.php", qui sert à m'envoyer l'email, puis suite au retour "success" de cette fonction, poster le contenu du formulaire vers paypal.

Sauf qu'évidemment, comme je fais du bricolage, ça ne marche pas... Quelqu'un pourrait me dire ce qui cloche dans mon code ?

Un grand merci d'avance.

Code html :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<html>
<head>
    <title>Bienvenue Telecom</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico" />
    <!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.scrolly.min.js"></script>
    <script src="js/skel.min.js"></script>
    <script src="js/init.js"></script>
    <noscript>
        <link rel="stylesheet" href="css/skel.css" />
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="css/style-desktop.css" />
    </noscript>
 
<!-- Here is the function I tried to make myself to submit the same form both to paypal and to the reserve.php -->
 
        <script>
                        (document).ready(function emailpaypal() {
                                        $.ajax({url: "reserve.php", data: $("form").serialize(), type : "POST",
                                                success: function(){
                                                        $.ajax({url: "https://www.paypal.com/cgi-bin/webscr", data: $("form").serialize(), type : "POST",
                                                        }
                                                )};
                                        });
                                return false;
                                });
        </script>
</head>
 
<!-- Here is the body of my page, with the only form the user has to fill in -->
 
<body>
    <form id="form" target="_blank" action="">
<input type="hidden" name="business" value="XXXXXXXX">
 
<!-- many other hidden and visible input values -->
 
<input type="submit" value="Send request" name="submit" border="0" src="https://www.paypalobjects.com/en_US/i/btn/btn_paynowCC_LG.gif" alt="PayPal - The safer, easier way to pay online" onclick="emailpaypal();">
</form>
</body>
</html>

**Golgotha** · 26/11/2014, 10h58

Bonjour,

Il serait préférable d'utiliser la méthode onsubmit dans ce cas. onsubmit="return maFonction()"

**jbqueromes** · 26/11/2014, 11h13

Merci pour la réponse. j'ai modifié en onsubmit="emailpaypal()" Par contre, dans la console je vois bien qu'il y a un eventlistener sur le "submit", mais rien ne se passe quand je clique. Je pense qu'il y a un souci dans mon code JQUERY, où se situe le problème à votre avis ?

**Golgotha** · 26/11/2014, 11h53

Si j'ai bien compris l'action final sera d’amener l'utilisateur sur la page paypal ?

Si oui,

l'action du formulaire doit être : https://www.paypal.com/cgi-bin/webscr. c'est ce qui amenera l'utilisateur sur la page paypal au final.

sur le onsubmit on aura juste à ajouter dans la fonction l'appel ajax à votre page.

ça donnerait quelque chose comme ça :

Code js :

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

1
2
3
4
5
6
7
(document).ready(function emailpaypal() {
that = $(this); // pas sûr de moi, si ça ne marche pas il faudrait utiliser un selecteur avec jquery pour faire le submit du formulaire plus facilement.
    $.ajax({url: "reserve.php", data: $("form").serialize(), type : "POST" })
    .done( that.submit(); // cf remarque plus haut. )
    .fail( return False; );
return False; // on empèche le formulaire de se poster, ça sera fait par le callback ajax.
 });

edit : petite modif lié au fait que .ajax est asynchrone et donc il faut poster le formualire nous-même, la réponse du callback arrive trop tard sinon.

**jbqueromes** · 26/11/2014, 14h58

Voilà ce que j'ai fait dans le code d'après votre dernière réponse :

Code :

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

1
2
3
4
5
6
7
8
9
 
		<script type="text/javascript">
 
				(document).ready(function emailpaypal() {
					$.ajax({url: "reserve.php", data: $("form").serialize(), type : "POST" })
                                        .done( return True; )
                                        .fail( return False; );
				});
		</script>

puis dans le HTML

Code :

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

<form name="form" method="post" action="https://www.paypal.com/cgi-bin/webscr" target="_blank" onsubmit="emailpaypal()">

Ca envoie bien le client sur la page paypal, mais rien de se passe au niveau de l'envoi de mail par contre. Il doit donc manquer quelque chose dans le script qui utilise le "reserve.php". La console javascript me notifie : "Uncaught SyntaxError: Unexpected token return" pour la ligne ".done( return True; )"...

**Golgotha** · 26/11/2014, 17h26

Effectivement, le return n'a pas tellement de sens ici.

Code js :

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

1
2
3
4
5
(document).ready(function emailpaypal() {that = $(this); // pas sûr de moi, si ça ne marche pas il faudrait utiliser un selecteur avec jquery pour faire le submit du formulaire plus facilement.
    $.ajax({url: "reserve.php", data: $("form").serialize(), type : "POST" })
    .done( that.submit(); /* cf remarque plus haut. */ )
return False; // on empèche le formulaire de se poster, ça sera fait par le callback ajax.
 });

**jbqueromes** · 26/11/2014, 20h26

OK, alors ça a l'air de fonctionner avec le code ci-dessous, qui me parait un peu trop simple pour être robuste pour le coup :

Code :

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

1
2
3
function emailpaypal() {
	$.ajax({url: "http://bienvenuetele.com/reserve.php", data: $("form").serialize(), type : "POST" })
});

Avec votre dernière proposition en revanche, j'obtiens une erreur dans la console : "Uncaught SyntaxError: Unexpected token ;" sur la ligne

Code :

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

.done( that.submit(); /* cf remarque plus haut. */ )

et le mail ne part pas.

**sipatsymasaka** · 04/12/2014, 07h03

qu'est-ce qui se passe quand tu enlève la ligne

Envoyé par jbqueromes

Code :

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

.done( that.submit(); /* cf remarque plus haut. */ )

**jbqueromes** · 04/12/2014, 09h08

Si j'enlève la ligne en question, le mail ne part toujours pas, et j'ai un autre type d'erreur dans la console : "Uncaught TypeError: undefined is not a function" qui porte sur la première ligne du js de cette fonction.

Code :

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

1
2
3
4
5
(document).ready(function emailpaypal() {that = $(this); // pas sûr de moi, si ça ne marche pas il faudrait utiliser un selecteur avec jquery pour faire le submit du formulaire plus facilement.
	$.ajax({url: "http://bienvenuetele.com/reserve3.php", data: $("form").serialize(), type : "POST" })
	/*.done( that.submit();  cf remarque plus haut.  )*/
	return False; // on empèche le formulaire de se poster, ça sera fait par le callback ajax.
});

Je suis vraiment pas très calé en dév js, donc à mon avis c'est juste une petite erreur d'un caractère qui traine ou d'une définition de variable, ou quelque chose comme ça.

**sipatsymasaka** · 05/12/2014, 11h49

et si tu mettais une seule action pour ton formulaire, seulement l'envoie mail par exemple, et c'est seulement après que tu redirige l'utilisateur vers la nouvelle page , avec les mêmes données en paramètre.

**jbqueromes** · 05/12/2014, 11h54

En fait la solution que j'ai trouvée en composant avec les différents retours que vous m'avez donné fonctionne :

Code :

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

1
2
3
function emailpaypal() {
	$.ajax({url: "http://bienvenuetele.com/reserve.php", data: $("form").serialize(), type : "POST" })
});

avec ça dans le HTML :

Code :

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

<form name="form" method="post" action="https://www.paypal.com/cgi-bin/webscr" target="_blank" onsubmit="emailpaypal()">

Mais ça me paraissait un peu trop "light" comme code pour être vraiment robuste à toutes les situations, vu qu'il n'y a aucune commande qui teste la fin de la requête ajax, ni aucun délai de type "document ready" qui attends le chargement de la page. Mais bon, comme j'ai trouvé la solution à mon problème, que ce code là fonctionne même si c'est un peu crado et que ça me va pour l'instant, je vais clôturer le sujet, en vous remerciant tous pour votre aide, et en espérant que ça aidera d'autres (je n'ai trouvé cette solution nulle part d'ailleurs).

**sipatsymasaka** · 05/12/2014, 11h58

eh bien bravo!
et merci pour la solution qui nous sera utile également.
effectivement il me semble aussi que cette solution n'a pas encore été proposée sur la toile.

**jbqueromes** · 05/12/2014, 12h01

J'ai peut-être mal cherché, mais en effet, cette problématique revient souvent sur plein de forums de développeurs. Et j'ai cherché pendant une semaine un code qui marche avec paypal et un PHP, sans succès.

Peut-être que ça pourra aider quelqu'un.

Moi, de mettre les mains dans le code de mon site en tout cas, et pour la première fois, ça m'a bien fait marrer, c'est un beau métier, développeur !

[AJAX] Soumettre le contenu d'un formulaire à deux endroits

AJAX

Discussions similaires

Partager

Partager