<h3>Current Data</h3> x: <span id="x"></span> <br/> y: <span id="y"></span> <br/> z: <span id="z"></span> <br/> current WiFi SSID: <span id="ssid"></span> <h6>Last updated <span id="ut"></span> seconds ago. <span id="status"></span> </h6> <h3>Update Data</h3> <form id="xform" onsubmit="return transmit(this)"> x: <input type="number" name="x" /> <input type="submit" /> </form> <form id="yform" onsubmit="return transmit(this)"> y: <input type="text" name="y" /> <input type="submit" /> </form> <form id="zform" onsubmit="return transmit(this)"> z: <input type="text" name="z" /> <input type="submit" /> </form> <a href="wifi.htm">WiFi settings</a><br/> <a href="/update">Firmware Update</a> <script> function g(i) { return document.getElementById(i) }; var xhttp, updateTime; function transmit(f) { if (!xhttp) { //prevent simultaneous requests g("status").innerHTML = "updating..."; xhttp = new XMLHttpRequest(); xhttp.open("POST", "/api"); xhttp.send(f ? (new FormData(f)) : ""); xhttp.onreadystatechange = function () { if (xhttp.readyState === XMLHttpRequest.DONE && xhttp.status === 200) { var data = JSON.parse(xhttp.responseText); g("x").innerHTML = data.x; g("y").innerHTML = data.y; g("z").innerHTML = data.z; g("ssid").innerHTML = data.ssid; xhttp = null; g("status").innerHTML = ""; updateTime = 0; } } } return false; //prevent form redirect } transmit(); setInterval(function () { g("ut").innerHTML = ++updateTime; }, 1000); setInterval(transmit, 5000); //autoupdate display every 5s </script>