htmx
htmx copied to clipboard
bigskysoftware
BUG: Double-posting form content?
I've been troubleshooting a strange error for most of the day. To start, here's my code:
<html>
<head>
<script src=https://unpkg.com/htmx.org></script>
<script src=https://unpkg.com/hyperscript.org></script>
</head>
<body>
<form id="form" data-hx-post="/edit" data-hx-trigger="UUUniqueEventNameHere">
<input type="hidden" name="html" id="html" value="">
<input type="hidden" name="other" value="">
<div class="wysiwyg" style="border: solid 1px black" contentEditable data-script="
on keydown
log 'keydown'
set #html.value to the #editor's innerHTML
send UUUniqueEventNameHere to the #form">
<div id="editor">
<p>Type in here. Every keystroke should send one request to the server, but it sends two. Curious.</p>
</div>
</div>
</form>
</body>
</html>
This is a simple test of submitting a form on every keystroke. (No, I'm not really going to do this, but it makes for a reproduceable error demo). The outer <div> wraps the inner #editor container, and listens for events that bubble up from it. If you type in this box, you'll see a single event logged, but two attempts made to the back-end server. What gives?
But wait, there's more. Remove the field named "other" and try again. Now, it works as you'd expect, with a single event and a single post to the server.
Can someone please help me figure out what I'm doing wrong, or what's going wrong in the event triggering between hyperscript and htmx?
