Ajax send POST to two URLs

Question

On my website I want to send POST data to two different URLs and slightly modify the data for each URL. One is infusion soft and the other is an API on another one of my websites.

NOTE #1: I will be replacing the URL to my personal API with example text.

NOTE #2: Is it imperative that I set the Content Types, or is there other headers/information I'm missing before I send the Form Data? If so, why the heck would this all run perfectly from desktop? This code used to all be in jQuery but was not working as well, so I tried to rewrite the entire thing in Vanilla JS just to get the idea of a dependency problem out of the way.

NOTE #3: No 'Access-Control-Allow-Origin' header is present on the requested resource.
^ This pertains to both Infusion Soft and my personal API. I'm assuming if it's not even set on Infusion Soft that it's not a problem, especially given the fact that everything works perfectly on desktop.

NOTE #4: Every and ALL selectors match an element. There are no typos and again, this works to 100% on desktop running
Windows 10 Home
Chrome Version 61.0.3163.100 (Official Build) (64-bit)

NOTE #5: The action on the form goes to Infusion Soft. I stop the default from happening so I can work with the data, then send it to our database. After that is done I work with the data again, then let the action attribute run for Infusion Soft - all you can see in the code.

My code is as follows:

<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>

This code works perfect on desktop and submits to both my personal API and Infusion Soft. In our API we take care of the first name and last name splitting and insert them into separate fields in the database. However, for Infusion Soft we need to do this before we send the data since we can not control their API. This is all working as planned on desktop.

On my iPhone7 in Safari, this code inserts into my personal database as planned, but does not even make it to Infusion Soft. I tested some things with console.log(); and found that

var FormData2 = new FormData(form);

is the line where things break on mobile.

Everything before this line is running perfect on mobile.

Any ideas? I'd really appreciate it!

**UPDATE: **

Here are my new variables and code for the second Request sending to Infusion Soft:

  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);

However, this is not working on desktop or mobile! :( The final alert confirmation however is coming through.

According to https://developer.mozilla.org/en-US/docs/Web/API/FormData#Browser_compatibility the `delete` is not supported on safari. — Gabriele Petrioli, Oct 18 '17 at 20:39
That table also says this code won't work on IE or Edge. Instead of creating the `FormData` from the form and then replacing entries in it, you'll need to create an empty `FormData` and populate it from the form and your variables using `.append()`. — Barmar, Oct 18 '17 at 20:59
@Barmar So I could just write var FormData2 = new FormData(); and not include the form in the parenthesis correct? — Zach Broniszewski, Oct 18 '17 at 21:11
Yes, that's how you create an empty `FormData`, then you can use `.append()` to add all the parameters you want to send. — Barmar, Oct 18 '17 at 21:20
@Barmar can you please check my update to the post? I GREATLY appreciate your help and I believe we're on the right track, it's just not working as of right now. — Zach Broniszewski, Oct 18 '17 at 21:26

score 0 · Answer 1 · answered Oct 18 '17 at 22:52

SOLVED

As @Barmar mentioned in the comments, I had to create empty FormData and append all of the values manually. I did this and at first it was not working. What I figured out is that I was appending all the values I wanted to send to Infusion Soft, but the solution was to send ALL hidden fields Infusion Soft gives you in the unstyled HTML forms and their values as well.

I just had to make these appends which were 3 other hidden fields in the form:

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

Note that I had already set the variables to their values prior to this code block. Infusion Soft must not accept data unless it receives these values, which makes complete sense.

Ajax send POST to two URLs

1 Answers1