Lazy Load Form Fields In Rails With HTMX

HTMX is small powerful library that lets you trigger HTTP AJAX requests simply by adding attributes to your HTML tags without having to write any Javascript.

In a previous post I wrote how to Lazy Load Form Fields In Rails Using StimulusReflex. I like Stimulus and StimulusReflex both a lot, paired together they are incredibly powerful set of libraries for Rails.

However recently HTMX caught my attention, “a library that allows you to access modern browser features directly from HTML, rather than using Javascript”. So I thought I would try implementing the same lazy loading of form fields using HTMX for comparison.

The /app/views/users/_form.html.erb looks the same as before.

<%= form_with(model: user, url: [user], local: true) do |form| -%>
<div class="card">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">
      <%= form.text_field :name, label: "Name", placeholder: "Enter name", required: true %>
    </li>
    <li class="list-group-item">
      <%= form.email_field :email, label: "Email", placeholder: "Enter email", required: true %>
    </li>
  </ul>
  <div class="card-footer">
    <%= form.submit "Save", class: "btn btn-secondary float-right" %>
  </div>
</div>
<% end %>