hx-vals with hx-post fails to create object in request

[johntom]

Hi,
backend: fastify 4.25.2
htmx 1.9.12
nodejs 20.12.0
I keep getting 400 and 404 errors with the following and I've read issue 1940 and copying code but using hx-post,

raw request headers for both buttons is missing json format in url
GET /post1?someOtherValue=whatever&id=1055&someInheritedValue=1234 HTTP/1.1

Response Status Error Code 404 from post1
one button click
GET http://localhost:8080/post1?someOtherValue=whatever&id=1055&someInheritedValue=1234 404 (Not Found)
he @ htmx.org@latest:1
(anonymous) @ htmx.org@latest:1
i @ htmx.org@latest:1
htmx.org@latest:1 Response Status Error Code 404 from /post1
b @ htmx.org@latest:1
ce @ htmx.org@latest:1
fe @ htmx.org@latest:1
Mr @ htmx.org@latest:1
b.onload @ htmx.org@latest:1
load (async)
he @ htmx.org@latest:1
(anonymous) @ htmx.org@latest:1
i @ htmx.org@latest:1

another button click
Response Status Error Code 404 from post1
GET http://localhost:8080/post1?someOtherValue=whatever&id=1055&someInheritedValue=1234 404 (Not Found)
he @ htmx.org@latest:1
(anonymous) @ htmx.org@latest:1
i @ htmx.org@latest:1
htmx.org@latest:1 Response Status Error Code 404 from /post1
b @ htmx.org@latest:1
ce @ htmx.org@latest:1
fe @ htmx.org@latest:1
Mr @ htmx.org@latest:1
b.onload @ htmx.org@latest:1
load (async)
he @ htmx.org@latest:1
(anonymous) @ htmx.org@latest:1
i @ htmx.org@latest:1

{"level":30,"time":1714154549250,"pid":70132,"hostname":"BGR-LT-37BG3Y2","reqId":"req-7","res":{"statusCode":415},"err":{"type":"FastifyError","message":"Unsupported Media Type: application/x-www-form-urlencoded",

One Button Another Button

1 if I include hx-request='{"noHeaders":true}' (One Button) it hits the server but body is not the expected json but rather 'locationId=p1'
2 Another Button I get 400 errors listed above and never hit server
fsatify log server reports
...
{"level":30,"time":1714154549250,"pid":70132,"hostname":"BGR-LT-37BG3Y2","reqId":"req-7","res":{"statusCode":415},"err":{"type":"FastifyError","message":"Unsupported Media Type: application/x-www-form-urlencoded",
...

3 the following script does not correct issue

<script> 
document.body.addEventListener('htmx:configRequest', (event) => {
console.log('executed htmx:configRequest') 
event.detail.headers['Content-Type'] = 'application/json';
// event.detail.headers['Content-Type'] = 'x-www-form-urlencoded';
});
</script>

[johntom]

A deeper dive indicates an issue with simple form post does send json data in url. Also issue seems tp be unique to fastify as it does not happen with express.

<form hx-post="/post1" hx-target="#result"  hx-request='{"noHeaders":true}'>
  <div>
    <label>First Name</label>
    <input type="text" name="firstName" value="Joe">
  </div>
  <div class="form-group">
    <label>Last Name</label>
    <input type="text" name="lastName" value="Blow">
  </div>
  <div class="form-group">
    <label>Email Address</label>
    <input type="email" name="email" value="joe@blow.com">
  </div>
  <button class="btn">Submit</button>
  <!-- <button class="btn" hx-get="/contact/1">Cancel</button> -->
</form>
<div id="result"></div>

[johntom]

I tested with a require version of fastify 4 version and it works as designed. Will post when and if fixed for the EcmaScript version 4 as still not not sure where It went wrong.

[johntom]

I was missing @fastify/formbody and Fixed app config with the following
app.addContentTypeParser('application/json', { parseAs: 'string' }, function (req, body, done) {
try {
var json = JSON.parse(body)
done(null, json)
} catch (err) {
err.statusCode = 400
done(err, undefined)
}
})