Ajax and non-ajax discourse post creator.

ajax.html

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>


<form class="form-horizontal"  method="post">
<fieldset>

<!-- Form Name -->
<legend>Form Name</legend>

<!-- Text input-->
<div class="control-group">
  <label class="control-label" for="boardurl">Board URL</label>
  <div class="controls">
    <input id="boardurl" name="boardurl" type="text" placeholder="meta.discourse.org" class="input-xlarge" required="">
    <p class="help-block">The Extermal Address of your form (i.e discourse.coolsite.com)</p>
  </div>
</div>

<!-- Text input-->
<div class="control-group">
  <label class="control-label" for="API">API Key</label>
  <div class="controls">
    <input id="API" name="API" type="text" placeholder="mysupersecretkey" class="input-xlarge" required="">
    <p class="help-block">The API key for this discourse install.</p>
  </div>
</div>

<!-- Text input-->
<div class="control-group">
  <label class="control-label" for="User">Username</label>
  <div class="controls">
    <input id="User" name="User" type="text" placeholder="trident" class="input-xlarge" required="">
    <p class="help-block">A user to introduce</p>
  </div>
</div>

<!-- Text input-->
<div class="control-group">
  <label class="control-label" for="cat">Category Name</label>
  <div class="controls">
    <input id="cat" name="cat" type="text" placeholder="meta" class="input-xlarge" required="">
    <p class="help-block">Category to post to</p>
  </div>
</div>

<!-- Text input-->
<div class="control-group">
  <label class="control-label" for="API_U">API Username</label>
  <div class="controls">
    <input id="API_U" name="API_U" type="text" placeholder="trident" class="input-xlarge" required="">
    <p class="help-block">API user to post as</p>
  </div>
</div>

<!-- Textarea -->
<div class="control-group">
  <label class="control-label" for="intro">Introduction</label>
  <div class="controls">                     
    <textarea id="intro" name="intro">Something about yourself... you hobbies maybe?</textarea>
  </div>
</div>

<!-- Button -->
<div class="control-group">
  <label class="control-label" for="singlebutton">Let's go!</label>
  <div class="controls">
    <button id="singlebutton" name="singlebutton" class="btn btn-success">Go</button>
  </div>
</div>

</fieldset>
</form>

<div id="hidden" style="display:none;"></div>
<script>
$( "form" ).on( "submit", function( event ) {
  event.preventDefault();
  $.ajax({
    type: 'POST',
    url: $("#boardurl").val(),
    contentType : 'application/json',
    data: { 
        'api_key': $("#API").val(), 
        'api_username': $("#API_U").val(),
        'title':'Introduction for ' + $("#User").val(),
        'raw': $("#intro").val(),
        'category': $("#cat").val(),
        'skip_validations':'true',
        'auto_track':'true'
    },
    success: function(msg){
    alert('We got it!');
    }
});
});
</script>

non-ajax.html

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>


<form class="form-horizontal"  method="post" onsubmit="sender(this); return false;">
<fieldset>

<!-- Form Name -->
<legend>Form Name</legend>

<!-- Text input-->
<div class="control-group">
  <label class="control-label" for="boardurl">Board URL</label>
  <div class="controls">
    <input id="boardurl" name="boardurl" type="text" placeholder="meta.discourse.org" class="input-xlarge" required="">
    <p class="help-block">The Extermal Address of your form (i.e discourse.coolsite.com)</p>
  </div>
</div>

<!-- Text input-->
<div class="control-group">
  <label class="control-label" for="API">API Key</label>
  <div class="controls">
    <input id="API" name="API" type="text" placeholder="mysupersecretkey" class="input-xlarge" required="">
    <p class="help-block">The API key for this discourse install.</p>
  </div>
</div>

<!-- Text input-->
<div class="control-group">
  <label class="control-label" for="User">Username</label>
  <div class="controls">
    <input id="User" name="User" type="text" placeholder="trident" class="input-xlarge" required="">
    <p class="help-block">A user to introduce</p>
  </div>
</div>

<!-- Text input-->
<div class="control-group">
  <label class="control-label" for="cat">Category Name</label>
  <div class="controls">
    <input id="cat" name="cat" type="text" placeholder="meta" class="input-xlarge" required="">
    <p class="help-block">Category to post to</p>
  </div>
</div>

<!-- Text input-->
<div class="control-group">
  <label class="control-label" for="API_U">API Username</label>
  <div class="controls">
    <input id="API_U" name="API_U" type="text" placeholder="trident" class="input-xlarge" required="">
    <p class="help-block">API user to post as</p>
  </div>
</div>

<!-- Textarea -->
<div class="control-group">
  <label class="control-label" for="intro">Introduction</label>
  <div class="controls">                     
    <textarea id="intro" name="intro">Something about yourself... you hobbies maybe?</textarea>
  </div>
</div>

<!-- Button -->
<div class="control-group">
  <label class="control-label" for="singlebutton">Let's go!</label>
  <div class="controls">
    <button id="singlebutton" name="singlebutton" class="btn btn-success">Go</button>
  </div>
</div>

</fieldset>
</form>

<div id="hidden" style="display:none;"></div>
<script>
function stringer(action, method, input) {
  //ripped from http://stackoverflow.com/a/13937065 but very functional!
    "use strict";
    var form;
    form = $('<form />', {
        action: action,
        method: method,
        style: 'display: none;'
    });
    if (typeof input !== 'undefined') {
        $.each(input, function (name, value) {

            $('<input />', {
                type: 'hidden',
                name: name,
                value: value
            }).appendTo(form);
        });
    }
    form.appendTo('body').submit();
}
function sender(t){
  stringer('http://' + $("#boardurl").val() + '/posts', 'post', {
        api_key: $("#API").val(), 
        api_username: $("#API_U").val(),
        title:'Introduction for ' + $("#User").val(),
        raw: $("#intro").val(),
        category: $("#cat").val(),
        skip_validations:'true',
        auto_track:'true'
});
  console.log('done?');
  return false;
      }
</script>