JSFiddle - React, Tailwind, and code Playground

HTML

<form action="#" onsubmit="api3create(this, event)" method="post">

  <input type="text" name="path" value="tsk/new" hidden>

  <div class="rowbox">
    <label>Subject</label>
    <input type="text" name="tsk_subject" placeholder="Task Subject" required>
  </div>

  <div class="rowbox">
    <label>Description</label>
    <input type="text" name="tsk_desc" placeholder="Description" required>
  </div>

  <div class="rowbox">
    <label for="submit">Save</label>
    <input id="submit" type="submit" value="Save">
  </div>
  <div id="id">Returning inserted tsk_id</div>
</form>

JavaScript

function api3create(elem, event) {
  event.preventDefault();
  //get JSON values from form
  var form = elem;
  var formData = new FormData(form)
  var object = {};
  formData.forEach(function(value, key) {
    object[key] = value;
  });
  var path = object.path
  var json = JSON.stringify(object)
  alert(json)

  //call API
  var url = "https://api3.go4webdev.org/" + path;
  var xhr = new XMLHttpRequest();
  xhr.open("POST", url);
  xhr.setRequestHeader("Accept", "application/json");
  xhr.onload = function() {
    alert("status "+xhr.readyState)
    if (xhr.readyState === 4) {
      document.getElementById("id").innerHTML = this.getAllResponseHeaders()
    }
  };
  xhr.send(json);
}