AJAX PUT request doing a POST instead

Question

I have a dynamically generated page with content being collected from a GET Rest request through $.getJSON(), this part is fine.

However, when I run the Ajax request, for some reason, it does a post and not a PUT, it reloads the page to the endpoint URL and it doesnt actually do the put request (since it posts instead).

Why is this happening? I have tried pretty much everything I can think of/I can find on SO & similar.

Here is a snippet of the JS being used to dynamically generate the page and also the AJAX request.

$("form#submit-unfinished-user-subscription-type").submit(function(e) {
  e.preventDefault(); //STOP default action

  var $this = $(this),
    $formURL = $this.attr("action"),
    $postData = $this.serializeArray();

  $.ajax({
    type: "PUT",
    data: $postData,
    url: $formURL,
    dataType: 'json',
    contentType: "application/json;",
    success: function(data, textStatus, jqXHR) {
      alert("info successfully updated!");
    },
    error: function(jqXHR, textStatus, errorThrown) {
      console.log(jqXHR, textStatus, errorThrown);
    }
  });

  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    var whereTo = $("#records-insert"),
      template;

    $.getJSON("endpoint_here", function(data) {
      for (var i = data.length - 1; i >= 0; i--) {
        template = "<tr><td>" + data[i].forename + " " + data[i].surname + "</td><td>" + data[i].email + "</td><td><form id=\"submit-unfinished-user-subscription-type\" method=\"post\" action=\"endpoint_here\"><input type=\"hidden\" name=\"user_id\" value=\"" + data[i].id + "\"><input type=\"hidden\" name=\"id\" value=\"" + data[i].user_sub_id + "\"><select name=\"subtype_id\"></select><input type=\"submit\"></form></td></tr>";
        whereTo.append(template);
      }
    });

    $.getJSON("endpoint_here", function(data) {
      whereTo = $("select[name=\"subtype_id\"]");
      for (var i = 0; i < data.length; i++) {
        template = "<option value=\"" + data[i].id + "\">" + data[i].name + "</option>";
        whereTo.append(template);
      }

    });
  });
</script>