Redirect AJAX au submit d'un formulaire

Fermé
ClemEmbarq Messages postés 3 Date d'inscription jeudi 15 février 2018 Statut Membre Dernière intervention 19 février 2018 - 15 févr. 2018 à 15:27
ClemEmbarq Messages postés 3 Date d'inscription jeudi 15 février 2018 Statut Membre Dernière intervention 19 février 2018 - 19 févr. 2018 à 10:47
Bonjour,
J'ai branché un webhook Zapier afin d'envoyer les données récoltées via mon formulaire (html/css) sur mon adresse mail.


<form id="embarq-form" action="https://hooks.zapier.com/hooks/catch/2588268/z2mzj1/" type="POST">
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label for="prenom"><p>Prénom</p></label>
<input type="text" class="form-control" id="prenom" placeholder="Jean" name="prenom" required>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="nom"><p>Nom</p></label>
<input type="text" class="form-control" id="nom" placeholder="Barq" name="nom" required>
</div>
</div>
</div>
<div class="form-group">
<label for="email"><p>Email</p></label>
<input type="email" class="form-control" id="email" placeholder="jean@gmail.com" name="email" required>
</div>
<div class="text-center">
<input type="submit" value="ENVOYER" class="btn-embarq" id="embarq-submit">
</div>
</form>


Je reçois bien l'email avec les données mais le submit me renvoie une string de data.

Afin de gérer la redirection j'ai utilisé de l'ajax à la suite de mon form qui ressemble maintenant à ça :

<form id="embarq-form">
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label for="prenom"><p>Prénom</p></label>
<input type="text" class="form-control" id="prenom" placeholder="Jean" name="prenom" required>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="nom"><p>Nom</p></label>
<input type="text" class="form-control" id="nom" placeholder="Barq" name="nom" required>
</div>
</div>
</div>
<div class="form-group">
<label for="email"><p>Email</p></label>
<input type="email" class="form-control" id="email" placeholder="jean@gmail.com" name="email" required>
</div>
<div class="text-center">
<input type="submit" value="ENVOYER" class="btn-embarq" id="embarq-submit">
</div>
</form>
<!-- Load jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>

<script>
// POST form data to zapier on submit
$('#embarq-form').submit(function(e){
e.preventDefault();
$.ajax({
url:'https://hooks.zapier.com/hooks/catch/2588268/z2mzj1/',
type:'post',
data:$('#embarq-form').serialize(),
success:function(){
// Redirect to another success page
window.location = "/";
}
});
});
</script>


Après intégration de l'ajax, au submit, le redirect fonctionne, le mail est envoyé mais sans les données (mail vide)

J'ai beau tourner le problème dans tous les sens, je n'arrive pas à le résoudre.

Une âme charitable pour me donner un coup de main ?

Merci infiniment.
Clément

1 réponse

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
15 févr. 2018 à 18:52
Bonjour,

Tu peux faire un
print_r($_POST);

dans ton fichier https://hooks.zapier.com/hooks/catch/2588268/z2mzj1/

Qu'est-ce que ça te donne ?

0
ClemEmbarq Messages postés 3 Date d'inscription jeudi 15 février 2018 Statut Membre Dernière intervention 19 février 2018
15 févr. 2018 à 23:31
Bonsoir Jordane,
Merci pour ta réponse.

Si j'ai bien compris je dois insérer cette ligne dans mon script et tester en console le submit ?
Voici ce qui ressort en console :

Uncaught SyntaxError: Unexpected identifier
application.js:12768 Uncaught TypeError: jQuery(...).autoNumeric is not a function
at HTMLDocument.<anonymous> (application.js:12768)
at fire (application.js:3144)
at Object.fireWith [as resolveWith] (application.js:3256)
at Function.ready (application.js:3468)
at HTMLDocument.completed (application.js:3499)

Désolé si j'ai mal compris.
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
15 févr. 2018 à 23:57
Au temps pour moi.. petite erreur...

Donc :
Dans ton appel ajax, remplace ta fonction comme ceci :
$('#embarq-form').submit(function(e){
  e.preventDefault();
  datas = $('#embarq-form').serialize();
  console.log(datas);
  $.ajax({
    url:'https://hooks.zapier.com/hooks/catch/2588268/z2mzj1/',
    type:'post',
    data:datas,
    dataType:"json";
    success:function(reponse){
      console.log(reponse);
      // Redirect to another success page
      //window.location = "/"; //désactivé le temps des tests
    },
    error:function(jqXHR, exception){
      console.log('Erreur :' jqXHR.status + ' : ' + jqXHR.responseText;
    }
  });
});

Et dans ton code php (celui de ton fichier https://hooks.zapier.com/hooks/catch/2588268/z2mzj1/ )
place (au début de ton script...)
echo json_encode($_POST);
exit();
0
ClemEmbarq Messages postés 3 Date d'inscription jeudi 15 février 2018 Statut Membre Dernière intervention 19 février 2018
19 févr. 2018 à 10:47
Bonjour,
Désolé pour le délais de réponse, quelques péripéties depuis vendredi.

J'ai bien modifié l'appel ajax en revanche je ne peux pas modifier le code php lié à l'url zapier. C'est une url auto-générée par zapier qui leur permet de stocker les datas collectées. Dans mon app il n'y a que la présence de cette url pas le détail du code.
0