Sanitizing/formatting form values before sending?

[kg-currenxie]

We have a case with inputs that are auto-formatted while you type

Which sends the comma in the request, which is not so nice:

The only way I found was this

<script>
  window.addEventListener('load', function () {
    htmx.on('htmx:beforeSend', function (event) {
      const params = event.detail.requestConfig.parameters
      params.sellAmount.replace(/,/g, '')
    })
  })
</script>

Is there any way other way of manipulating form values, or is this it?

Input:

<input
  type="text"
  id="sellAmount"
  name="sellAmount"
  hx-get="/example/quote"
  hx-trigger="change delay:500ms, keyup changed delay:500ms"
  hx-include="[name=sellCurrency]"
  hx-target="#buyAmount"
  hx-vals='{ "side": "sell" }'
/>

[andryyy]

Perhaps a little bit shorter:

<form hx-on::config-request="event.detail.parameters.sellAmount.replace(/,/g, '')">

Untested and written from a stupid mobile.

[kg-currenxie]

Thanks :) I see, I'll try that.. but I guess manipulating the event details is the "only" way to go?

[andryyy]

Hmm, there are probably a few. But I can’t think of an easier HTMX way.

You may also create a function in JS that replicates the input text into a hidden field that is updated to reflect the value as Int.

As you seem to have a function to add punctuation anyway, this might be a cleaner approach.

In HTMX you would use hx-params with "not punctuated-field" to filter it out.

[matiboy]

@kg-currenxie You could have your hx-vals do the cleanup. Check this codepen

Basically:

hx-vals='js:{"side":"sell","amount":compileData()}

and define your compileData as

function compileData() {
  return document.getElementById("sellAmount").value.replace(/,/g, '')
}

[andryyy]

Oh, that’s also nice.

[kg-currenxie]

Ah the js: trigger, smart :) I think that's good enough for us :) The hidden non-formatted input is good too :) Couldn't make hx-on::config-request work, but thank you both :)

[andryyy]

Ah the js: trigger, smart :) I think that's good enough for us :)

Couldn't make hx-on::config-request work, but thank you both :)

Are you using the latest HTMX? It was only recently added. But sure, you are welcome.

[kg-currenxie]

"htmx.org": "^1.9.3" 1.9.4 is from 9 days ago, was it that recent? :D

Update: Actually resolved to latest

    "htmx.org": {
      "version": "1.9.4",
      "resolved": "https://registry.npmjs.org/htmx.org/-/htmx.org-1.9.4.tgz",
      "integrity": "sha512-GB9afD20gYw708z2PjClwlDgNtD1p4RYQtlDKak/JyMhrgiSL8sPfGqdkNmSLrhuCFekWw9mLpRNK/+Xn9aayA=="
    },

[andryyy]

Yes! I think it’s a feature of the very, very recent version. 😄

[andryyy]

Yes! I think it’s a feature of the very, very recent version. 😄

Indeed, at least this used syntax.

https://github.com/bigskysoftware/htmx/pull/1489