form.html

<div class="foirm">
  <div class="gramcolumn">
    <span class="gramheading">Text to check:</span><br/>
    <form id="IGform">
      <textarea rows="15" cols="40" id="sourcetext" name="teacs" wrap="virtual" maxlength="1024"></textarea>
      <br/>
      <input type="submit" value="Submit"></input>
      <input type="reset" value="Clear"></input>
    </form>
  </div>

  <div class="gramcolumn">
    <span class="gramheading">Interface language:</span><br/>
    <form id="IGform">
      <div class="gramcolumn">
        <input type="radio" name="teanga" value="af_ZA"> Afrikaans (af)</input><br/>
        <input type="radio" name="teanga" value="zh_CN"> Chinese (zh_CN)</input><br/>
        <input type="radio" name="teanga" value="da_DK"> Danish (da)</input><br/>
        <input type="radio" name="teanga" value="nl_NL"> Dutch (nl)</input><br/>
        <input type="radio" name="teanga" value="en_US" checked> English (en_US)</input><br/>
        <input type="radio" name="teanga" value="eo"> Esperanto (eo)</input><br/>
        <input type="radio" name="teanga" value="fi_FI"> Finnish (fi)</input><br/>
        <input type="radio" name="teanga" value="fr_FR"> French (fr)</input><br/>
        <input type="radio" name="teanga" value="de_DE"> German (de)</input><br/>
        <input type="radio" name="teanga" value="hu_HU"> Hungarian (hu)</input><br/>
      </div>
      <div class="gramcolumn">
        <input type="radio" name="teanga" value="id_ID"> Indonesian (id)</input><br/>
        <input type="radio" name="teanga" value="ga_IE"> Irish (ga)</input><br/>
        <input type="radio" name="teanga" value="mn_MN"> Mongolian (mn)</input><br/>
        <input type="radio" name="teanga" value="ro_RO"> Romanian (ro)</input><br/>
        <input type="radio" name="teanga" value="sk_SK"> Slovak (sk)</input><br/>
        <input type="radio" name="teanga" value="es_ES"> Spanish (es)</input><br/>
        <input type="radio" name="teanga" value="sv_SE"> Sweden (sv)</input><br/>
        <input type="radio" name="teanga" value="vi_VI"> Vietnamese (vi)</input><br/>
        <input type="radio" name="teanga" value="cy_GB"> Welsh (cy)</input><br/>
      </div>
    </form>
  </div>
</div>
<hr/>
<div id="output"></div>
<script>
  window.addEventListener("load", function () {
    var form = document.getElementById("IGform");
    form.addEventListener("submit", function (event) {
      event.preventDefault();
      var XHR = new XMLHttpRequest();

      XHR.onreadystatechange = function(event) {
        if (XHR.readyState == XMLHttpRequest.DONE) {
          if (XHR.status == 200) {
            processJSON(JSON.parse(event.target.responseText));
          }
          else {
            var div=document.getElementById("output");
            div.innerHTML=XHR.status.toString()+': '+XHR.statusText;
          }
        }
      };

      XHR.open("POST", "https://cadhan.com/api/gramadoir/1.0");
      XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      XHR.setRequestHeader('Accept','application/json');
      var payload = '';
      var radios = document.getElementsByName('teanga');
      for (var i=0; i<radios.length; i++) {
        if (radios[i].checked) {
          payload = 'cliant=cadhan-en&teanga='+radios[i].value+'&teacs=';
          break;
        }
      }
      payload += encodeURIComponent(document.getElementById('sourcetext').value);
      XHR.send(payload);
      var div=document.getElementById("output");
      div.innerHTML='<em>Checking...</em>'
    });
  });

  function processJSON(arr) {
    var div=document.getElementById("output");
    div.innerHTML='';
    for(var i=0; i<arr.length; i++) {
      var line_num = parseInt(arr[i].fromy) + 1;
      var c_offset = parseInt(arr[i].contextoffset);
      var errlen = parseInt(arr[i].errorlength);
      div.innerHTML += line_num.toString() + ': ' + arr[i].context.slice(0,c_offset) + '<b class="gramadoir">' + arr[i].errortext + '</b>' + arr[i].context.slice(c_offset + errlen) + '<br/>' + arr[i].msg + '<br/><br/>';
    }
  }
</script>