Skip to content

Commit 8571b9e

Browse files
committed
Fix changed trigger specifier with checkbox nodes
<input type="checkbox"> is special in that it shows up with a value of "on", even if it is not checked. Introduce a helper function for getting the effective value of a node by handling this pecularity.
1 parent b19cb43 commit 8571b9e

File tree

2 files changed

+30
-4
lines changed

2 files changed

+30
-4
lines changed

src/htmx.js

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -313,6 +313,7 @@ var htmx = (function() {
313313
getAttributeValue,
314314
getClosestAttributeValue,
315315
getClosestMatch,
316+
getElementValue,
316317
getExpressionVars,
317318
getHeaders,
318319
getInputValues,
@@ -2390,6 +2391,17 @@ var htmx = (function() {
23902391
return false
23912392
}
23922393

2394+
/*
2395+
* @param {Element} elt
2396+
*/
2397+
function getElementValue(elt) {
2398+
if (elt.tagName.toLowerCase() == "input" && elt.getAttribute("type") == "checkbox") {
2399+
return elt.checked ? elt.value : ''
2400+
}
2401+
// @ts-ignore value will be undefined for non-input elements, which is fine
2402+
return elt.value
2403+
}
2404+
23932405
/**
23942406
* @param {Node} elt
23952407
* @param {TriggerHandler} handler
@@ -2423,8 +2435,7 @@ var htmx = (function() {
24232435
if (!elementData.lastValue.has(triggerSpec)) {
24242436
elementData.lastValue.set(triggerSpec, new WeakMap())
24252437
}
2426-
// @ts-ignore value will be undefined for non-input elements, which is fine
2427-
elementData.lastValue.get(triggerSpec).set(eltToListenOn, eltToListenOn.value)
2438+
elementData.lastValue.get(triggerSpec).set(eltToListenOn, getElementValue(eltToListenOn))
24282439
})
24292440
}
24302441
forEach(eltsToListenOn, function(eltToListenOn) {
@@ -2467,8 +2478,7 @@ var htmx = (function() {
24672478
}
24682479
if (triggerSpec.changed) {
24692480
const node = event.target
2470-
// @ts-ignore value will be undefined for non-input elements, which is fine
2471-
const value = node.value
2481+
const value = getElementValue(node)
24722482
const lastValue = elementData.lastValue.get(triggerSpec)
24732483
if (triggerSpec.delay > 0) {
24742484
if (!elementData.pendingValue.has(triggerSpec)) {

test/attributes/hx-trigger.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,22 @@ describe('hx-trigger attribute', function() {
4040
div.innerHTML.should.equal('Requests: 1')
4141
})
4242

43+
it('changed modifier works for checkboxes', function() {
44+
var requests = 0
45+
this.server.respondWith('GET', '/test', function(xhr) {
46+
requests++
47+
xhr.respond(200, {}, 'Requests: ' + requests)
48+
})
49+
var input = make('<input type="checkbox" hx-trigger="click changed" hx-target="#d1" hx-get="/test"/>')
50+
var div = make('<div id="d1"></div>')
51+
input.click()
52+
this.server.respond()
53+
div.innerHTML.should.equal('Requests: 1')
54+
input.click()
55+
this.server.respond()
56+
div.innerHTML.should.equal('Requests: 2')
57+
})
58+
4359
it('changed modifier works along from clause with single input', function() {
4460
var requests = 0
4561
this.server.respondWith('GET', '/test', function(xhr) {

0 commit comments

Comments
 (0)