Menu
I'm trying to learn HTMX https://htmx.org/ by building a simple example.
This here is a form with two data entry fields.
It should fire, when the "search" button is clicked or enter is pressed.
This works.
I would like to provide some feedback to the form user:
to grey out the "search" button so it's only activated when there's data in both fields
to grey out the "search" button while a request to the backend it curently in progress. Alternatively show a spinner and block input while the request runs.
<html>
<head>
<title>example</title>
<script src="https://unpkg.com/[email protected]"
integrity="sha384-EzBXYPt0/T6gxNp0nuPtLkmRpmDBbjg6WmCUZRLXBBwYYmwAUxzlSGej0ARHX0Bo"
crossorigin="anonymous"></script>
</head>
<body>
<h1>Hello World!!!</h1>
<div id="main">
<button hx-get="/button1" hx-target="#main">
Get stuff
</button>
</div>
<div id="main2">
<form>
<label for="search">label:</label>
<input id="s1" name="q" type="search" placeholder="one">
<input id="s2" name="q2" type="search" placeholder="two">
<button hx-post="/button2" hx-target="#main" hx-trigger="click, keyup[enterKey] from:body">
Search
</button>
</form>
</div>
</body>
</html>
334
This should be easily done by using htmx extensions.
Check the following:
disable-element
loading-states
Make sure to use the latest htmx version.
To get the list of all htmx extensions you can check:
https://extensions.htmx.org/
53
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
