Html Form Submit Data

HTML / CSS / JS Open Kit Simulator ↗ All recipes

About this recipe

Replace URL with your Pi's API endpoint

Libraries / imports

No imports detected

Hardware / pins

DHT22 BME280 HC-SR04

Key API calls

document.getElementById() addEventListener() fetch()

How to run

Press Render preview — renders live in a sandboxed iframe with mocked /api/*.

Editor html edits auto-save

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Log Reading</title>
<style>
body{font-family:system-ui;max-width:480px;margin:40px auto;padding:0 16px}
form{display:grid;gap:12px}
label{font-weight:700;color:#0f172a;font-size:.86rem}
input,select{padding:10px;border-radius:8px;border:1px solid #cbd5e1;font:inherit}
button{background:#0ea5e9;color:#fff;border:0;padding:11px;border-radius:8px;font-weight:900;cursor:pointer}
.flash{padding:10px;border-radius:8px;display:none;margin-bottom:10px}
.flash.ok{background:#dcfce7;color:#166534}
.flash.err{background:#fee2e2;color:#991b1b}
</style></head><body>
<h2>Log a sensor reading</h2>
<div class="flash" id="flash"></div>
<form id="f">
  <label>Sensor <select name="sensor" required>
    <option>DHT22</option><option>BME280</option><option>HC-SR04</option>
  </select></label>
  <label>Value <input name="value" type="number" step="0.01" required></label>
  <label>Unit <input name="unit" value="°C"></label>
  <button type="submit">Save</button>
</form>
<script>
document.getElementById('f').addEventListener('submit', async (e) => {
  e.preventDefault();
  const fd = new FormData(e.target);
  const flash = document.getElementById('flash');
  flash.style.display = 'block';
  try {
    // Replace URL with your Pi's API endpoint
    const r = await fetch('/api/readings', { method:'POST', body: fd });
    const j = await r.json();
    flash.className = 'flash ok'; flash.textContent = 'Saved! id=' + j.id;
    e.target.reset();
  } catch (err) {
    flash.className = 'flash err'; flash.textContent = 'Failed: ' + err.message;
  }
});
</script></body></html>

Output ready

Output will appear here after you click Run.

About this recipe

Libraries / imports

Hardware / pins

Key API calls

How to run

We use cookies to make DIY KIT work.