diff --git a/src/htmx.js b/src/htmx.js
index d415a640..7582e2c1 100644
--- a/src/htmx.js
+++ b/src/htmx.js
@@ -1768,14 +1768,14 @@ var htmx = (() => {
                     // Return promise for async evaluation
                     return this.__executeJavaScriptAsync(elt, {}, javascriptContent, true).then(obj => {
                         for (let key in obj) {
-                            body.append(key, obj[key])
+                            body.set(key, obj[key])
                         }
                     });
                 } else {
                     // Synchronous path
                     let obj = this.__parseConfig(hxValsValue);
                     for (let key in obj) {
-                        body.append(key, obj[key])
+                        body.set(key, obj[key])
                     }
                 }
             }
diff --git a/test/tests/attributes/hx-vals.js b/test/tests/attributes/hx-vals.js
index 755e03dd..76cf3449 100644
--- a/test/tests/attributes/hx-vals.js
+++ b/test/tests/attributes/hx-vals.js
@@ -8,6 +8,98 @@ describe('hx-vals attribute', function() {
         cleanupTest(this.currentTest)
     })
 
+    it('basic hx-vals works with HCON', async function() {
+        mockResponse('POST', '/vars', 'Clicked!')
+        let div = createProcessedHTML("<div hx-post='/vars' hx-vals='i1:\"test\"'></div>")
+        div.click()
+        await forRequest()
+        fetchMock.calls[0].request.body.get("i1").should.equal('test');
+        div.innerHTML.should.equal('Clicked!')
+    })
+
+    it('basic hx-vals works without braces', async function() {
+        mockResponse('POST', '/vars', 'Clicked!')
+        let div = createProcessedHTML("<div hx-post='/vars' hx-vals='\"i1\":\"test\"'></div>")
+        div.click()
+        await forRequest()
+        fetchMock.calls[0].request.body.get("i1").should.equal('test');
+        div.innerHTML.should.equal('Clicked!')
+    })
+
+    it('basic hx-vals works with braces', async function() {
+        mockResponse('POST', '/vars', 'Clicked!')
+        let div = createProcessedHTML('<div hx-post="/vars" hx-vals=\'{"i1":"test"}\'></div>')
+        div.click()
+        await forRequest()
+        fetchMock.calls[0].request.body.get("i1").should.equal('test');
+        div.innerHTML.should.equal('Clicked!')
+    })
+
+    it('multiple hx-vals works', async function() {
+        mockResponse('POST', '/vars', 'Clicked!')
+        let div = createProcessedHTML('<div hx-post="/vars" hx-vals=\'{"v1":"test", "v2":42}\'></div>')
+        div.click()
+        await forRequest()
+        fetchMock.calls[0].request.body.get("v1").should.equal('test');
+        fetchMock.calls[0].request.body.get("v2").should.equal('42');
+        div.innerHTML.should.equal('Clicked!')
+    })
+
+    it('Dynamic hx-vals using spread operator works', async function() {
+        mockResponse('POST', '/vars', 'Clicked!')
+        window.foo = function() {
+            return { v1: 'test', v2: 42 }
+        }
+        let div = createProcessedHTML("<div hx-post='/vars' hx-vals='js:{...foo()}'></div>")
+        div.click()
+        await forRequest()
+        fetchMock.calls[0].request.body.get("v1").should.equal('test');
+        fetchMock.calls[0].request.body.get("v2").should.equal('42');
+        div.innerHTML.should.equal('Clicked!')
+        delete window.foo
+    })
+
+    it('hx-vals can be inherited from parents', async function() {
+        mockResponse('POST', '/vars', 'Clicked!')
+        createProcessedHTML("<div hx-vals:inherited='\"i1\":\"test\"'><div id='d1' hx-post='/vars'></div></div>")
+        let div = find('#d1')
+        div.click()
+        await forRequest()
+        fetchMock.calls[0].request.body.get("i1").should.equal('test');
+        div.innerHTML.should.equal('Clicked!')
+    })
+
+    it('child hx-vals can override parent', async function() {
+        mockResponse('POST', '/vars', 'Clicked!')
+        createProcessedHTML("<div hx-vals:inherited='\"i1\":\"test\"'><div id='d1' hx-post='/vars' hx-vals='\"i1\":\"override\"'></div></div>")
+        let div = find('#d1')
+        div.click()
+        await forRequest()
+        fetchMock.calls[0].request.body.get("i1").should.equal('override');
+        div.innerHTML.should.equal('Clicked!')
+    })
+
+    it('hx-vals overrides input values', async function() {
+        mockResponse('POST', '/vals', 'Submitted')
+        let form = createProcessedHTML('<form hx-post="/vals" hx-vals=\'{"i1":"test"}\'>' +
+            '<input name="i1" value="original"/>' +
+            '<button>Submit</button>' +
+            '</form>')
+        form.querySelector('button').click()
+        await forRequest()
+        fetchMock.calls[0].request.body.get("i1").should.equal('test');
+        form.innerHTML.should.equal('Submitted')
+    })
+
+    it('computed values using event in js: prefix', async function() {
+        mockResponse('POST', '/vars', 'Clicked!')
+        let div = createProcessedHTML('<div id="myDiv" hx-post="/vars" hx-vals=\'js:{i1: event.target.id}\'></div>')
+        div.click()
+        await forRequest()
+        fetchMock.calls[0].request.body.get("i1").should.equal('myDiv');
+        div.innerHTML.should.equal('Clicked!')
+    })
+
     it('hx-vals:append merges JSON objects correctly', async function() {
         mockResponse('POST', '/test', 'Success')
         const div = createProcessedHTML(