Forms without reloads
A {form} with rules= posts through htmx and comes back as its own fragment - refilled with PAD's messages, or as a thank-you. The same rules are checked in the browser first.
{form client}rules=padPosted
hx-posthx-swap="outerHTML"
Live
Requests htmx made
Nothing yet - use the example above, and every request it makes shows here with the part PAD answered.
How it is built
PAD, on the server htmx, in the browser
<label class="small switch-line"><input type="checkbox" checked data-toggle-rules="#signup form"> Check in the browser first - turn it off to see PAD's answer to a bad post</label>
<div id="signup">
{fragment 'signup'}
{if $done}
<div class="callout is-good rise">
<p><strong>Welcome aboard, {$name}!</strong> PAD checked the post against the rules of the form and the page's PHP ran for a good one only.</p>
<p><button class="btn-sm btn-ghost" hx-get="?examples/form" hx-target="#signup">Sign up someone else</button></p>
</div>
{else}
{form 'signup', client, error, hx-post='?examples/form', hx-target='#signup', class='stack'}
{input 'name', label='Name', rules='required|max:40', class='input'}
{input 'email', type='email', label='E-mail', rules='required|email', class='input'}
{input 'age', label='Age', rules='integer|min:18', class='input'}
<button>Sign up</button>
{/form}
{/if}
{/fragment}
</div><?php
// The rules= of form.pad checked the post before this file runs: padPosted ( 'signup' ) is
// TRUE for a post that kept them alone. htmx posts the form (hx-post) and swaps the answer
// into its place - hx-target="#signup" sends HX-Target: signup, so the answer is the
// {fragment 'signup'}: the form again, refilled, with PAD's messages beside its fields, or
// the welcome. The browser checks the same rules first (client); switch that off to see
// PAD's own answer.
$done = padPosted ( 'signup' );
$name = htmxText ( 'name' );
?>