[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.
 });

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

AJAX

Vue hybride

Discussions similaires

Partager

Partager