https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • r
    what's the "HTMX" way for highly dynamic forms like this one?
  • s
    I see. Thank you for being specific. This helps a lot! Sooo what I would do is: 1. when change from A to B occurs or B to A: - start a request and disable all input fields so user cannot change them - display gif loader or something to let the user know it's loading... they DO know their internet is slow anyway. That's not news to them. - let the request complete and replace the part of the form that has the fields - now (if needed) unlock the inputs so the user can change them even with a slow connection it would probably not take much also when they switch the select again -- repeat the procedure.. so there is no chance they change the inputs while backend might return new
  • s
    --- Another approach would be: put unique ID on each and make sure the backend will render the replacement form with the same unique id for each input. also make sure the backend has no value="" for the inputs in the newly rendered form. if you do that (at least in my experience) htmx will leave the value that is in the DOM input as-is (will not remove it)
  • r
    ooo let me try the second one
  • r
    hm that doesn't seem to work for me, if I leave the 
    value
    field blank the inputs get cleared on swap. I probably want the first solution you proposed then with https://htmx.org/extensions/disable-element/ on a fieldset that has all the inputs within it
  • s
    are you 100% sure the in the DOM and the in the newly received Html have the same exact id? like DOM: vs received html ?
  • r
    yeah, they should be the same - player1 through player5
  • s
    this is very strange
  • r
    are you using idiomorph or just the default swapping that comes with HTMX?
  • s
    is this online somewhere?
  • r
    not yet no
  • s
    I am not using anything but default HTMX.
  • r
    Even after getting rid of idiomorph and double checking, yeah with the same id the value is reset on every swap
  • r
    My form has the following attribute
    Copy code
    hx-trigger="change" hx-select="form" hx-swap"outerHTML" hx-get="/"
  • s
    Yes. I might have lied to you... I am now trying it with a simple example and it doesn't work.
  • r
    oh haha, I'll try the disabled thing then
  • s
    I remember doing it a few weeks ago and it working. But I did not like the result for other reasons and opted for not replacing the inputs at all, just OOB-swap parts of the page.
  • r
    yeah in my case I need to change the number of the inputs, so I need to swap them
  • s
    I don't know what exactly you are creating but even with things like react/angular/vue.. if part of the form changes from a select.. I would not be surprised to see that part of form to be reset upon a change.. of course you can write a small script to port the values if you wish but not a big deal even if you don't. I suspect you placed the above (or "before") the input fields that it changes so in the default scenario the person would use the select before starting typing in the and there will not be a change after that
  • s
    like select "play with N players", then display N .. fill in the player names.. done.
  • r
    yeah agreed, I'm just realizing that this edge case technically exists and seeing if something can be done
  • r
    with the select at the top I agree that it's very unlikely someone would be able to do all these steps within the time the request completes
  • s
    yepp
  • b
    If the first 3 inputs are essentially the same, just add the next 2 in the same form and on change toggle hidden on the 2 lower inputs. This way you can also have separate buttons for each form with different post actions.
  • b
    A little hyperscript will help here
  • b
    Copy code
    <select _="on change toggle @hidden on #optionB then toggle @hidden on #buttonA">
  <option>Option A</option>
  <option>Option B</option>
</select>
<form method="post">
  <input id="player1" type="text name="player1" placeholder="player1">
  <input id="player2" type="text name="player2" placeholder="player2">
  <input id="player3" type="text name="player3" placeholder="player3">
  <div id="optionB" hidden>
    <input id="player4" type="text name="player4" placeholder="player4">
    <input id="player5" type="text name="player5" placeholder="player5">
    <button id="buttonB" type="submit">Submit B</button>
  </div>
  <button id="buttonA" type="submit">Submit A</button>
</form>
  • s
    Great!
  • s
    Guys, I'm just reading about this framework. Can you tell me if it's a good idea to use it if my app will be UI oriented? I need a rich UI experience, but it seems to me that a simple counter example is much slower than React for example.
  • s
    You can still use HTMX for most things and do "islands" of react or whatever you like for the rich-UI-heavy parts
  • s
    But it very much depends on what you mean by "rich UI". I have seen great things getting done with HTMX and hyperscript that I did not suspect were possible
1...113511361137...1146Latest