Inconsistent search forms in Chapters 3, 4 and 6

[nickchomey]

Ch 6 starts with this search form

<form action="/contacts" method="get" class="tool-bar">
    <label for="search">Search Term</label>
    <input id="search" type="search" name="q" value="{{ request.args.get('q') or '' }}"/> (1)
    <input type="submit" value="Search"/>
</form>

It is the form initially created in Ch 3,

However in Ch4, it was changed significantly

<div id="main">
  <form> <1>
      <label for="search">Search Contacts:</label>
      <input id="search" name="q" type="search" placeholder="Search Contacts"> <2>
      <button hx-post="/contacts" hx-target="#main"> <3>
        Search The Contacts
      </button>
  </form>
</div>

and then changed again to this:

<div id="main">

  <label for="search">Search Contacts:</label>
  <input id="search" name="q" type="search" placeholder="Search Contacts">
  <button hx-post="/contacts" hx-target="#main" hx-include="#search"> (1)
    Search The Contacts
  </button>

</div>

Interestingly, this form does not use the value="{{ request.args.get('q') or '' }}"/> mechanism used in Ch 3 and 6.

I'm not sure which mechansims (a form with request.args.get vs no form, hx-post and hx-include) should be used where (ch 3 vs 4 vs 6), but there should probably be consistency between them.

Or, perhaps just add a comment in Ch 6 to say that we're ignoring the form-less search form developed in Ch 4 in order to have progressive enhancement/fallback to no-JS.

Still, the initial Ch 4 search mechanism should at least start with what was developed in Ch 3.

[1cg]

Hello, I agree w/ your issue and have implemented a fix in the new repo, which should be public soon. Thank you!