https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • h
    you can use hx-vals to specifically state what data should be sent against the wire
  • h
    actually https://htmx.org/attributes/hx-params/ is probably a better fit
  • i
    Doh. Don't know how i missed that. Thank you @hundreds-camera-24900 !
  • h
    np 🙂
  • w
    Is there any reason why I wouldn’t get a POST body? I get headers but no body.
  • h
    no form data to submit?
  • w
    Ohhhh
  • w
    So I have input element inside a form. But I trigger on key up
  • w
    Does hx-post require a method that responds to a form submit?
  • h
    no that sounds right to me
  • h
    you have hx-post on the form?
  • h
    and h-xtrigger: keyup
  • h
    it should post all the inputs inside of it
  • h
    can you post an html snippet?
  • w
    Copy code
    html
<form id="search-form" class="relative">
    <i class="absolute bi bi-search text-gray-400 top-4 left-4"></i>
    <input id="phraseDiv" type="search" hx-post="search_result" hx-trigger="keyup changed delay:1s"
        hx-target="#search-results"
        class="bg-white h-14 w-full px-12 rounded-lg focus:outline-none hover:cursor-pointer">
</form>
  • w
    I have hx-post on the input element
  • h
    try adding a name atribute to the input
  • h
    i think right now it doesn't know what the send the data in #phraseDiv back the server as
  • w
    Yep. That gives me something in the body 
    Body: b'search='
  • w
    But I don't get anything in the value.
  • w
    I also tried using hx-include="#myform" to see if it would post the entire form up with the appropriate values.
  • h
    try moving the hx-post up to the form?
  • w
    That no longer calls my endpoint.
  • l
    I have a question about form validation - the difference between drop and abort. In the docs (https://htmx.org/attributes/hx-sync/) there are 2 examples.
    Copy code
    <form hx-post="/store">
    <input id="title" name="title" type="text" 
        hx-post="/validate" 
        hx-trigger="change"
        hx-sync="closest form:abort">
    <button type="submit">Submit</button>
</form>
    And
    Copy code
    <form hx-post="/store">
    <input id="title" name="title" type="text" 
        hx-post="/validate" 
        hx-trigger="change"
        hx-sync="closest form:drop"
    >
    <button type="submit">Submit</button>
</form>
    In the first example, the docs say that if there were a validation request and a form submission, the validation request would be cancelled and the form submission would be prioritized. In the second example, the validation would be prioritized and the form submission would be dropped. Both examples use "form:drop" or "form:abort". In both cases, wouldn't the form submission be cancelled? Don't both actions operate on the form, not on the input?
  • w
    And changing to hx-get didn't work either.
  • s
    try specifying the method to post in the form
  • w
    In this Active Search example where hx-trigger is defined as:
    Copy code
    html
hx-trigger="keyup changed delay:500ms, search"
    What does the term at the end called "search" do?
  • s
    when an event with the name of search is emitted the form is submitted
  • w
    I thought I did that correctly with 
    hx-post="search_result"
  • w
    In the Active Search example they do not use a form: https://htmx.org/examples/active-search/
1...964965966...1146Latest