<div id="postThreadContainer">
  <div class="infoBox" style="width: 80%;">
    <div class="header">
      <i class="fa fa-commenting" aria-hidden="true"></i>
      <span>Post New Thread</span>
    </div>

    <div class="alertBox">
    </div>

  <form>
    <div class="table" style="width: 100%;">
    <select id="threadCategory" class="tableCell">
    </select>
    <input placeholder="Enter thread title..." type="text" id="threadTitle" class="tableCell"/>
  </div>
    <textarea id="threadContent" placeholder="Enter thread content..."/></textarea>
    <input type="submit" value="Post" id="submitThreadButton"/>
  </form>
</div>
</div>

<script>
$( document ).ready(function() {

$.getJSON("_categories", function(response) {
  $.each(response, function(i, category) {
      $('select').append("<option value='" + category.id + "'>" + category.title + "</option>");
  });

  $('select option[value="'+ parseGet("id") +'"]').attr("selected",true);
});

});


$("#submitThreadButton").click(function(e) {
  e.preventDefault();

    $.getJSON("_postthread",
    {
      title : $('form #threadTitle').val(),
      content : $('form #threadContent').val(),
      category : $('select').val(),
    },

    function(result) {
      if (result["errorCode"] == 0)
        window.location.replace(result["destination"]);
      else {
        showErrorMessage(result["errorCode"]);
      }
    }
  );
});
</script>