form.submit() vs requestSubmit() — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 form.submit() vs requestSubmit()</h1>
    <p class="pg-sub">
      Type an email (or leave it blank), then click each button and watch the log.
      This is a <strong>real</strong> form with a <strong>real</strong> <code>required</code>
      field — nothing here is faked. One method checks that field. One never does, ever.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> The form (Save button lives outside it — like a modal footer)</div>

<div class="wrap-controls">
        <div class="field">
          <label class="label" for="emailInput">Email (required)</label>
          <input type="email" id="emailInput" name="email" required placeholder="you@example.com" />
        </div>
      </div>

<div class="presets" style="margin-top:14px">
        <button class="btn sm" data-preset="valid">Fill a valid email</button>
        <button class="btn sm" data-preset="blank">Leave it blank</button>
      </div>

<div class="btn-row" style="margin-top:16px">
        <button class="btn bad" id="submitBtn">Call form.submit()</button>
        <button class="btn primary" id="requestSubmitBtn">Call form.requestSubmit()</button>
        <button class="btn ghost" id="resetBtn">Reset</button>
      </div>
      <p class="hint">
        Both buttons act on the same hidden <code>&lt;form&gt;</code> below — exactly like a
        footer button outside a modal's form, driving it by JS instead of by DOM nesting.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> What actually happened</div>
      <div class="status" id="status">
        <span class="dot info" id="dot"></span>
        <span id="statusText">Ready — try an empty field first, then a valid one.</span>
      </div>
      <div class="log" id="log" style="margin-top:12px; max-height: 180px; overflow:auto;">
        <div class="muted">Log will appear here.</div>
      </div>
      <div class="sink-pill-row">
        <span class="pill" id="sinkPill">hidden sandbox frame navigations: 0</span>
      </div>
      <p class="hint">
        That pill is real: <code>form.submit()</code> genuinely navigates — it's just aimed at a
        hidden, off-screen iframe here instead of this whole page, so you can click it safely
        and compare. On a real page with no <code>target</code>, that navigation is your page.
      </p>
    </div>
  </div>

<form id="demoForm" target="sink" action="about:blank" method="post" style="position:absolute; left:-9999px;">
    <input type="hidden" name="email-proxy" />
  </form>
  <iframe name="sink" id="sinkFrame" title="submission sandbox" tabindex="-1" aria-hidden="true"></iframe>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.