<html>
  <head>
    <title>Sample Post test</title>
  <body>
    <h1>Sample Post test</h1>
    
    <h2>Sample Post File</h2>
    <form enctype="multipart/form-data">
        <input type="file" name="file"/>
        <input type="hidden" name="hidden" value="bollobollo" />
        <br>
        <button formmethod="POST" formaction="api/post/upload-image">Post File</button>
    </form>
    
    <h2>Sample Post JSON</h2>
    
    <form id="jsonform">
        <input name='name' value='MyName'>
        <input name='info' value='MyInfo'>
        <select name='option'>
        <option selected>opt1</option>
        <option>opt2</option>
        <option>opt3</option>
        </select>
        <label>ticked</label>
        <input type='checkbox'  name='ticked'>
    </form>
    <p><input id="jsonrep" placeholder="AFB-daemon Response" readonly style="width: 100%">
    <button onclick="xpost();">Post JSON</button>

    <script>
    // post bouton press post form as JSON
    var xpost=function() {
        var jform={};
        var xform = document.querySelector('#jsonform').elements;
        var xreqt = new XMLHttpRequest();
        xreqt.open("POST", "api/post/upload-json", true);
        xreqt.setRequestHeader('Content-Type', 'application/json');
        
        // Serialise jform in JSON
        for(var ind = 0; ind < xform.length; ind++) {
            console.log ("name=%s value=%s", xform[ind].name, xform[ind].value);
            jform[xform[ind].name] = xform[ind].value;
        }

        // display afb-daemon return values
        xreqt.onload = function () {
            var result = "Status:" + xreqt.status + " Value:" + xreqt.responseText;
            document.getElementById("jsonrep").value = result;
            console.log (result);
        };
        
        // Post Form as JSON
        console.log ("Posting jform=%j", jform); 
        xreqt.send(JSON.stringify(jform)); 
    };
    </script>

    
    </body>
</html>