Form submit

back edit

Submit input.form on input change.

<form>
  <label>
    <input name="hire" type="checkbox" data-autosubmit> Available for hire
  </label>
</form>

Submit form with JavaScript and replace [data-replace-remote-form-target] with the form response.

<div data-replace-remote-form-target>
  <form action="/replace" data-replace-remote-form>
    <button type="submit" class="btn">Submit</button>
  </form>
</div>

Prevent user from navigating away from a page without saving their changes with an alert dialog with [data-warn-unsaved-changes].

<form data-warn-unsaved-changes>
  <label>
    <input name="warnme" type="checkbox"> Check this box, and reload the page
  </label>
</form>

Use [data-replace-remote-form-target] for paginated responses. Server responds with 404 when page number is less than or more than the expected range; 1-10 in this case.

<div data-replace-remote-form-target="list">
  <div id="list" class="Box p-3">Page 1/10</div>
  <div class="d-flex mt-3">
    <form class="flex-auto pr-2" action="/" data-replace-remote-form>
      <button value="prev" name="paginate" type="submit" class="btn btn-block">Previous</button>
    </form>
    <form class="flex-auto pl-2" action="/" data-replace-remote-form>
      <button value="next" name="paginate" type="submit" class="btn btn-block">Next</button>
    </form>
  </div>
</div>