🐛 Prevents erroring on null vals (#2799)

* 🐛 Prevents erroring on null vals

* 🚧 Applies same fix in FormProxy

* 🧪 Adds Test for null in FormDataProxy

Author: ekwoka

src/htmx.js

@@ -3966,7 +3966,7 @@ var htmx = (function() {
     const formData = new FormData()
     for (const key in obj) {
       if (obj.hasOwnProperty(key)) {
-        if (typeof obj[key].forEach === 'function') {
+        if (obj[key] && typeof obj[key].forEach === 'function') {
           obj[key].forEach(function(v) { formData.append(key, v) })
         } else if (typeof obj[key] === 'object' && !(obj[key] instanceof Blob)) {
           formData.append(key, JSON.stringify(obj[key]))
@@ -4059,7 +4059,7 @@ var htmx = (function() {
           return false
         }
         target.delete(name)
-        if (typeof value.forEach === 'function') {
+        if (value && typeof value.forEach === 'function') {
           value.forEach(function(v) { target.append(name, v) })
         } else if (typeof value === 'object' && !(value instanceof Blob)) {
           target.append(name, JSON.stringify(value))

test/attributes/hx-vals.js

@@ -297,4 +297,15 @@ describe('hx-vals attribute', function() {
     }
     calledEvent.should.equal(true)
   })
+  it('hx-vals works with null values', function() {
+    this.server.respondWith('POST', '/vars', function(xhr) {
+      var params = getParameters(xhr)
+      params.i1.should.equal('null')
+      xhr.respond(200, {}, 'Clicked!')
+    })
+    var div = make("<div hx-post='/vars' hx-vals='{\"i1\": null }'></div>")
+    div.click()
+    this.server.respond()
+    div.innerHTML.should.equal('Clicked!')
+  })
 })

test/core/parameters.js

@@ -280,6 +280,14 @@ describe('Core htmx Parameter Handling', function() {
     vals.foo.should.equal('bar')
   })
 
+  it('formdata works with null values', function() {
+    var form = make('<form hx-post="/test"><input name="foo" value="bar"/></form>')
+    var vals = htmx._('getInputValues')(form, 'get').values
+    function updateToNull() { vals.foo = null }
+    updateToNull.should.not.throw()
+    vals.foo.should.equal('null')
+  })
+
   it('order of parameters follows order of input elements', function() {
     this.server.respondWith('GET', '/test?foo=bar&bar=foo&foo=bar&foo2=bar2', function(xhr) {
       xhr.respond(200, {}, 'Clicked!')