Sending data from form to HubDB?

[JP51]

Hi all,

Im currently attempting to create a HTML form that will send the input data to a HubDB table. I have been attempting to POST this via a serverless function however the data is not making to the database and i am getting a HTTP 415 error for unsupported media type. Can anyone look over my code and tell me where i am going wrong? Ive never done this stuff before and my JavaScript is not great.

const data = JSON.stringify({
      values: {
        "name": "Name",
        "company": "BisName",
        "email": "email",
        "phone": "fone"    
      }})

exports.main = (context, sendResponse) => {
  var http = require("https");

  var options = {
      "method": "POST",
      "hostname": "api.hubapi.com",
      "port": null,
      "path": "/cms/v3/hubdb/tables/customer_data/rows?hapikey=MyApiKey",
      "headers": {
        "accept": "application/json",
        "Content-Type": "application/json"
      }
    };

  var req = http.request(options, function (res) {
    var chunks = [];

    res.on("data", function (chunk) {
      chunks.push(chunk);
    });

    res.on("end", function () {
      var body = Buffer.concat(chunks);
      console.log(body.toString());
    });
  });

  req.write(data);
  req.end();

    //sendResponse is what you will send back to services hitting your serverless function.
    sendResponse({body: data, statusCode: 200});
};

[Graham_USMC]

@JP51 - Hi there. Great question to post and I'm hoping you've either cracked this or @webdew 's answer worked. Could you please let me know? Thank you for posting and helping the community 🙂

[JP51]

@webdew  sadly i can't get that to work either. I'm starting to think that it isnt the JavaScript that is the problem.

I have a form:

<div style="text-align: center;">
      <form action="https://<MY_DEV_ACCOUNT>/_hcms/api/FuncTest" method="POST">
        Contact Name:<br/>
        <input name="ContactName" id="ContactName" type="text"/><br/><br/>
        Company Name:<br/>
        <input name="BusinessName" id="BusinessName" type="text"/><br/><br/>
        Contact Phone Number:<br/>
        <input name="ContactPhone" id="ContactPhone" type="text"/><br/><br/>
        Contact Email:<br/>
        <input name="ContactEmail" id="ContactEmail" type="text"/><br/><br/>

        Industry:<br/>
        <select name="ddlInd" id="ddlInd">
          <option value="tel">Telecommunications</option>
          <option value="agri">Agricultural</option>
          <option value="mine">Mining</option>
          <option value="other">Other</option>
        </select> <br/><br/>
        <input type="submit" value="SUBMIT" class="btn">
      </form>
    </div>

That should send the data to the serverless function i posted in the original comment or the code you posted with a serverless.json file:

{
  "runtime": "nodejs12.x",
  "version": "1.0",
  "environment": {},
  "endpoints": {
    "FuncTest": {
      "method": "POST",
      "file": "sFuncPostCustTest.js"
    }
  }
}

i assume there is an issue that i am not seeing with these 2 files.

Thanks for any help guys.

[webdew]

Hi @JP51 ,

<div style="text-align: center;">
<form method="POST">
Contact Name:<br/>
<input name="ContactName" id="ContactName" type="text"/><br/><br/>
Company Name:<br/>
<input name="BusinessName" id="BusinessName" type="text"/><br/><br/>
Contact Phone Number:<br/>
<input name="ContactPhone" id="ContactPhone" type="text"/><br/><br/>
Contact Email:<br/>
<input name="ContactEmail" id="ContactEmail" type="text"/><br/><br/>

Industry:<br/>
<select name="ddlInd" id="ddlInd">
<option value="tel">Telecommunications</option>
<option value="agri">Agricultural</option>
<option value="mine">Mining</option>
<option value="other">Other</option>
</select> <br/><br/>
<input type="submit" value="SUBMIT" class="btn">
</form>
</div>


<script>
$(document).on('submit','.btn', function(){
const data = { ContactName: $('#ContactName').val(), BusinessName: $('#BusinessName').val(), ContactPhone: $('#ContactPhone').val(), ContactEmail: $('#ContactEmail').val(), ddlInd: $('#ddlInd').val() };
var requestOptions = {
'method': 'POST',
'headers': {
'Content-Type': "multipart/form-data",
},
"body": JSON.stringify(data),
};
fetch("https://<MY_DEV_ACCOUNT>/_hcms/api/FuncTest", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));
});
</script>

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards. 

[webdew]

Hi @JP51 ,

Please use below code for POST request:

const data = { username: 'example' };
var requestOptions = {
'method': 'POST',
'headers': {
'Content-Type': "multipart/form-data",
},
"body": JSON.stringify(data),
};
fetch("<URL>", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards. 

[dennisedson]

I feel like this a question for @miljkovicmisa  😜