htmx & hyperscript

HTMX


hx-include

include field values in request

<input type="text" id="username" placeholder="Enter your name"><select id="language"> <option value="English">English</option> <option value="Spanish">Spanish</option> <!-- other options --></select><button hx-post="/submit-data" hx-trigger="click" hx-include="#username, #language">Submit</button>

hx-trigger

trigger GET request, on change of Select option

<select id="options"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <!-- other options --></select>
<div hx-get="/get-content" hx-trigger="change from:#options" hx-include="#options"    hx-target="#content"></div><div id="content"></div>

trigger values




hx-vals

add JSON value to request

<div id="bq">Some Data</div><button type="button" class="btn btn-primary btn-sm" type="submit" value="Submit"
hx-post="{% url 'send_profile' userid=obj.user_id %}"
hx-vals="js:{appdata: document.getElementById('bq').innerHTML}">Send</button>

or 

hx-vals='{"somekey": "somevalue"}'

passing a Jinja variable to the API backend

<button type="button" class="btn btn-info"   id="email_btn"   data-bs-toggle="modal" data-bs-target="#basemodal"   data-bs-title="Email Applicants"   data-bs-modalsize="modal-lg"   hx-get="{% url 'mm_email_applicants' %}"   hx-target="#modal-body-area"   hx-vals='{"search_data": "{{search_data}}"}'>
</button>

Hyperscript


CSS Properties

change CSS property

<div class="row" id="row_1">some row text</div><input type="checkbox" _="on click set row_1.style['background-color'] to 'red'"></input>

or via human-language

<button _="on click set #row_1's *background-color to 'red'">  Set It's Background To Red</button>
<div id="row_1">  The Div</div>

multiple ON events

<input class="form-check-input" name="checkbox" type="checkbox" id="mycheckbox" {% if checkbox %}checked{% endif %}  _="on load or click       if my.checked is true         show #someField    else         hide #someField
"> Check this box?

get all IDs on button click


<div class="myClass" id="1"></div>
<div class="myClass" id="2"></div>

<button _="on click