Posting to API of CRM with Ajax / Javascript

Question

I'm trying to send form data to an API for integration into a CRM. It needs to send in valid JSON format, per posting instructions. I'm having some trouble since I've never done anything like this before.

First, I gather the form data into an object, then stringify it. All variables are strings gathered from the form.

var allFormValues = 
{
           "First": fNameInput,
           "Last": lNameInput,
           "Referrer": "guid",
           "Type": "guid",
           "Primary": phoneAreaInput + phonePrefInput + phoneLineInput,
           "Email": emailNameInput,
           "Details": "question" + answer 
}
var formData = JSON.stringify($(allFormValues).serializeArray());

Then, I set up an AJAX request to post it to the API

$.ajax({
            type: 'POST',
            url: 'theapiurl,
            beforeSend: function(request) {
                request.setRequestHeader('Content-Type', 'application/json');
                request.setRequestHeader('Accept', 'application/json');
            }
            data: formData,
            success: function(data) {
                console.log(data);
            }
        });

But it's not working. Can anyone provide any guidance here? Thanks in advance.

EDIT: I can't grab form data directly since Squarespace names their form inputs weird names. I did figure this out though -- turns out my JSON construction was off. It was assigning objects to the values, so I had to use the toString() method when assigning values, like so:

var allFormValues = 
        {
            "First": fNameInput.toString(),
            "Last": lNameInput.toString(),
            "Referrer": "redacted",
            "Type": "redacted",
            "Primary": phoneAreaInput.toString() + phonePrefInput.toString() + phoneLineInput.toString(),
            "Email": emailNameInput.toString(),
            "Details": details.toString()
        }

then send it off with

$.ajax({
                type: 'POST',
                url: 'redacted',
                data: allFormValues,
                beforeSend: function(request) {
                    request.setRequestHeader('Content-Type', 'application/json');
                    request.setRequestHeader('Accept', 'application/json');
                },          
                success: function(data) {
                    console.log(data);
                },
                error: function(data){
                    console.log(data);
                }
            });

That `$.ajax()` code has syntax errors; there's a quote missing after the URL, and a comma missing before `data:`. Other than that it should be an easy fix: `var formData = JSON.stringify(allFormValues);` (`.serializeArray()` is meant to be called on forms; you were sending an empty array) — , Oct 21 '19 at 23:00
Possible duplicate of [jQuery posting JSON](https://stackoverflow.com/questions/5570747/jquery-posting-json) — , Oct 21 '19 at 23:05
Your first step should be to learn to use your browser's developer tools. If you were using them, it would show you errors (if any) in the console. Plus, you can use it to watch the network and see what is sent in your XHR request, and what the response is.... — random_user_name, Oct 21 '19 at 23:09

score 0 · Accepted Answer · answered Oct 21 '19 at 23:05

Did you try do not stringify or serialize the data?

var allFormValues = {
   "First": fNameInput,
   "Last": lNameInput,
   "Referrer": "guid",
   "Type": "guid",
   "Primary": phoneAreaInput + phonePrefInput + phoneLineInput,
   "Email": emailNameInput,
   "Details": "question" + answer 
};

$.ajax({
    type: 'POST',
    url: 'theapiurl',
    beforeSend: function(request) {
        request.setRequestHeader('Content-Type', 'application/json');
        request.setRequestHeader('Accept', 'application/json');
    }
    data: allFormValues,
    success: function(data) {
        console.log(data);
    }
});

It was a combination of this and assigning the values wrong. — Identicon, Oct 22 '19 at 20:49

Posting to API of CRM with Ajax / Javascript

1 Answers1