Form Submission via Ajax returning a 415 error

[Kennan_wmk]

I am trying to submit data from an html form to a hubspot form using ajax, but keep getting a 415 error. From developer.mozilla.org: "The HTTP 415 Unsupported Media Type client error response code indicates that the server refuses to accept the request because the payload format is in an unsupported format. The format problem might be due to the request's indicated Content-Type or Content-Encoding , or as a result of inspecting the data directly."

I believe that I have everything set up the way that I need to because this is nearly identical to another form submission that I've done that worked fine (the other was using axios instead of ajax, but looks basically identical with ajax.post(...) being replaced by $.post(...).

Here is my javascript:

$(document).ready(function(){
     $('#auraForm').submit(function (e, data) {
     		console.clear();
         e.preventDefault();
         dataToHubspot();
     });
});

function dataToHubspot() {
 
    var data = {
      'fields': [
        {'name': 'project_name',
        'value': $("input[name='project_name']").val()},
        {'name': 'fixture_type',
        'value': $("input[name='fixture_type']").val()},
        {'name': 'specifying_company',
        'value': $("input[name='specifying_company']").val()},
        {'name': 'project_location',
        'value': $("input[name='project_location']").val()},
        {'name': 'contact',
        'value': $("input[name='contact']").val()},
        {'name': 'quantity',
        'value': $("input[name='quantity']").val()},
        {'name': 'item_number',
        'value': $("input[name='item_number']").val()},
        {'name': 'email',
        'value': $("input[name='email']").val()},
      ],
      "legalConsentOptions": {
        "consent": { // Include this object when GDPR options are enabled
          "consentToProcess": true,
          "text": "I agree to allow Evo-Lite to store and process my personal data.",
          // "communications": [
          //   {
          //     "value": true,
          //     "subscriptionTypeId": 999,
          //     "text": "I agree to receive marketing communications from Example Company."
          //   }
          // ]
        }
      },
      'skipValidation': true,
  
    }; 
  
   $.post('https://api.hsforms.com/submissions/v3/integration/submit/4212798/928e4bbb-bc49-4c67-9a2e-f2472a10b9ae', data)
    .then(function (response) {
      console.log(response);
    }) 

}

and here is the error when I try to submit the form:

jquery-1.7.1.js:4 
POST https://api.hsforms.com/submissions/v3/integration/submit/4212798/928e4bbb-bc49-4c67-9a2e-f2472a10b9ae 415

send	        @ jquery-1.7.1.js:4
ajax	        @ jquery-1.7.1.js:4
f.<computed>	@ jquery-1.7.1.js:4
dataToHubspot	@ module_14632068748_A…ec_Sheet_page.js:57
(anonymous)	@ module_14632068748_A…ec_Sheet_page.js:15
dispatch        @ jquery-1.7.1.js:3
i	        @ jquery-1.7.1.js:3

[IsaacTakushi · Accepted solution]

Hi, @Kennan_wmk.

It looks like you're submitting some invalid JSON.

In the data object you shared, the fields array and the skipValidation property use single quotes ('). Only the legalConsentOptions object uses the double quotes (") necessary for valid JSON. See the example JSON in this article.

Could you also confirm that you're sending the header Content-Type: application/json? Sometimes that header must be explicitly set to avoid 415 errors.

[Kennan_wmk]

Looks like I was missing the header that you mentioned, which was causing the 415 error. 

I added this right above my document ready function to add the header:

$.ajaxSetup({
    contentType: 'application/json'
});

This got rid of the 415 error, but submitting the form then gave a 400 error, which was fixed by doing a JSON.stringify() on my data before feeding it to the $.post().

Thanks a ton!

[IsaacTakushi]

Glad to hear it, @Kennan_wmk. Thanks for sharing so others can benefit as well!