Ajax envoyer POST à ​​deux URL

Question

Sur mon site Web, je veux envoyer des données POST à ​​deux URL différentes et modifier légèrement les données pour chaque URL. L'un est infusion douce et l'autre est une API sur un autre de mes sites Web.

NOTE # 1: Je vais remplacer l'URL de mon API personnel par un exemple de texte.

REMARQUE # 2: Est-il impératif de définir les types de contenu ou y a-t-il d'autres en-têtes/informations qui me manquent avant d'envoyer les données de formulaire? Si oui, pourquoi diable tout cela fonctionnerait parfaitement à partir du bureau? Ce code utilisé pour être tous dans jQuery mais ne fonctionnait pas aussi bien, j'ai donc essayé de réécrire le tout dans Vanilla JS juste pour avoir l'idée d'un problème de dépendance à l'écart.

NOTE # 3:No 'Access-Control-Allow-Origin' header is present on the requested resource.
^ Cela concerne à la fois douce et Infusion mon API personnelle. Je suppose que si ce n'est même pas sur Infusion Soft que ce n'est pas un problème, d'autant plus que tout fonctionne parfaitement sur le bureau.

REMARQUE # 4: Tous les sélecteurs et tous les éléments correspondent à un élément. Il n'y a pas des fautes de frappe et encore, cela fonctionne à 100% sur le bureau en cours d'exécution
Windows 10 Home
Chrome Version 61.0.3163.100 (Official Build) (64-bit)

NOTE # 5: L'action sur la forme va à perfusion souple. J'arrête le défaut et je peux travailler avec les données, puis les envoyer à notre base de données. Après cela, je travaille à nouveau avec les données, puis je laisse l'attribut action fonctionner pour Infusion Soft - tout ce que vous pouvez voir dans le code.

Mon code est le suivant:

<script> 

var form = document.getElementById('RequestADemo'); 
document.getElementById('submitButton').addEventListener('click', processData); 

function processData(e){ 

    e.preventDefault(); 

    var phone = document.getElementById('inf_field_Phone1').value; 

    var formData = new FormData(form); 
    formData.append('action', 'insertLead'); 
    formData.append('inf_field_Phone', phone); 

    var oReq = new XMLHttpRequest(); 
    oReq.open('POST', 'http://example.com/api.php', true); 
    oReq.send(formData); 

    var fullName = document.getElementById('inf_field_FirstName').value; 
    var fullNameSplitted = fullName.split(' '); 

    var firstName = fullNameSplitted[0]; 

    if (fullNameSplitted.length > 1) { 
    var lastName = fullNameSplitted[1]; 
    } 

    var formData2 = new FormData(form); 
    formData2.delete('inf_field_FirstName'); 
    formData2.append('inf_field_FirstName', firstName); 
    formData2.append('inf_field_LastName', lastName); 

    var oReq2 = new XMLHttpRequest(); 
    oReq2.open('POST', form.getAttribute('action'), true); 
    oReq2.send(formData2); 

    form.reset(); 

    alert('Thanks! We will contact you shortly. Check your email for a confirmation.'); 

} 

</script> 

Ce code fonctionne parfaitement sur le bureau et soumet à la fois mon API personnelle et Infusion douce. Dans notre API, nous prenons en charge le fractionnement du prénom et du nom de famille et les insérons dans des champs séparés de la base de données. Cependant, pour Infusion Soft, nous devons le faire avant d'envoyer les données, car nous ne pouvons pas contrôler leur API. Tout fonctionne comme prévu sur le bureau.

Sur mon iPhone7 dans Safari, ce code s'insère dans ma base de données personnelle comme prévu, mais ne parvient même pas à Infusion Soft. J'ai testé certaines choses avec console.log(); et a constaté que

var FormData2 = new FormData(form); 

est la ligne où les choses se brisent sur mobile.

Tout avant que cette ligne fonctionne parfaitement sur mobile.

Des idées? Je l'apprécierais vraiment!

** MISE À JOUR: **

Voici mes nouvelles variables et le code pour la deuxième demande d'envoi à perfusion souple:

var email = document.getElementById('inf_field_Email').value; 
    var company = document.getElementById('inf_field_Company').value; 
    var phone = document.getElementById('inf_field_Phone1').value; 

    var fullName = document.getElementById('inf_field_FirstName').value; 
    var fullNameSplitted = fullName.split(' '); 

    var firstName = fullNameSplitted[0]; 

    if (fullNameSplitted.length > 1) { 
    var lastName = fullNameSplitted[1]; 
    } 

    var formData2 = new FormData(); 
    formData2.append('inf_field_FirstName', firstName); 
    formData2.append('inf_field_LastName', lastName); 
    formData2.append('inf_field_Email', email); 
    formData2.append('inf_field_Company', company); 
    formData2.append('inf_field_Phone1', phone); 

    var oReq2 = new XMLHttpRequest(); 
    oReq2.open('POST', form.getAttribute('action'), true); 
    oReq2.send(formData2); 

Cependant, cela ne fonctionne pas sur le bureau ou mobile! :( La confirmation d'alerte finale est cependant en cours.

Answer 1

SOLVED

Comme @Barmar mentionné dans les commentaires, je devais créer vide FormData et ajouter toutes les valeurs manuellement. Je l'ai fait et au début, ça ne fonctionnait pas. Ce que j'ai compris, c'est que j'ajoutais toutes les valeurs pour envoyer à Infusion Soft, mais la solution était d'envoyer ALL champs cachés Infusion Soft vous donne également dans les formulaires HTML non-formatés et leurs valeurs.

Je viens de faire ces 3 qui étaient ajouter ses autres champs cachés sous la forme:

formData2.append('inf_form_xid', xid); 
formData2.append('inf_form_name', isFormName); 
formData2.append('infusionsoft_version', isVersion); 

Notez que j'avais déjà définir les variables à leurs valeurs antérieures à ce bloc de code. Infusion Soft ne doit pas accepter de données à moins de recevoir ces valeurs, ce qui est parfaitement logique.