Load data into form using htmx js

Question

I'm using HTMX a javascript library that allows you to access AJAX directly in HTML.

Although I understand the basic logic of HTMX, there are some aspects that I don't get.

I managed to make a form and write data to the server:

<form id="my-form">
    <input type="text" name="firstname">
    <input type="text" name="secondname">

    <button type="button"
        hx-post="write.php"
        hx-target="#container-div"
        hx-swap="innerHTML"> 
        Submit
    </button>
</form>

<div id="container-div"></div>

HTMX will read all name and will submit them to write.php where they can be read with a loop of $_POST:

write.php:

foreach ($_POST as $key => $value) {
    echo "Field ".htmlspecialchars($key)." is ".htmlspecialchars($value)."<br>";
}

I don't understand how to populate the form with the data returned by the server. For example, given the following form and the following output I would like to populate the single INPUT fields when the button is pressed:

HTML:

<button type="button"
    hx-get="load.php"
    hx-target="#my-form"
    hx-swap="innerHTML">
    Load data
</button>

<form id="my-form">
    <input type="text" name="firstname">
    <input type="text" name="secondname">
</form>

load.php:

$a = array(
    "firstname" => "John",
    "secondname" => "Smith",
);

echo json_encode($a);

I know that docs say that "when you are using htmx, on the server side you typically respond with HTML, not JSON", but does this means that the server output should be the whole HTML code necessary to render the form again like this?

echo "
    <form id="my-form">
        <input type="text" name="firstname" value="John">
        <input type="text" name="secondname" value="Smith">
    </form>
";

What if the form had dozens of fields, long select menus and complex checkboxes groups? Won't it be an enormous amount of data passed from the server to the client?

I'm pretty sure I'm missing something...

Answer 1

You are correct in your understanding: htmx would expect you to return all the HTML that you want to populate the form with.

This might seem inefficient, but it turns out that HTML compresses very well and the typical payload is not much larger than the JSON equivalent. This blog article outlines why that is.

Additionally, even with a larger payload, the transfer time is often dwarfed by the connection set up and processing time. htmx doesn't require any client-side templating, and thus can be much faster than many JSON-based UI setups that require that. intercooler.js, the predecessor to htmx, grew out of a small helper function that I wrote because I was processing a huge table in JSON and it was taking forever. I found out that just receiving the table in HTML form and slamming it into the DOM was orders of magnitude faster.

All that being said, I don't want to dismiss your question. There are ways to narrow your payload down in htmx:

• You can use the hx-target to narrow down the area that is updated to the minimum amount of HTML
• You can use Out of Band Swaps to target specific items for replacement
• Push come to shove, you can use the HX-Trigger header to pass data directly to a javascript event handler to populate your form

However, before doing any of that, I would recommend just trying the boring, simple way and seeing if the performance is acceptable. I am guessing that the answer will be yes, and you will find that the decreased maintenance burden is well worth whatever small perf gains might be achieved by a more complicated solution.