-1

My current code is:

<form id="search-form" hx-post="/search-api" hx-target="#search-result"></form>
<div class="search-wrapper">
    <div class="material-icons search-button md-8 md-light" role="button" type="submit" form="search-form">search</div>
    <div class="search-bar-wrapper">
         <textarea name="search" type="text" class="search-bar" id="search-bar" form="search-form" placeholder="search" oninput="autoResize(this)"></textarea>
    </div>
</div>
<div id="search-result"></div>

I can't submit the form when I click the div, do I have to add some onclick="htmx.trigger(...)" like that? I can't figure out how the htmx.trigger function works though.

I didn't figure it out and I just changed the "div" button into an actual button and restyled the button.

Some people say I can just submit the form with JavaScript, but it wouldn't trigger the htmx-post function at all! It would also refresh the page, so that's not it.

Mark Rotteveel
  • 100,966
  • 191
  • 140
  • 197
6plosive
  • 1
  • 6

2 Answers2

0

You can create an event listener on the "button" and in the callback function call submit() on the form element.

const searchButton = document.getElementById('search-button');

searchButton.addEventListener('click', e => {
  document.forms.searchForm.submit();
});
.search-button {
  cursor: pointer;
  padding: .3em;
  border: thin solid gray;
  border-radius: .3em;
  display: inline-block;
}
<form id="search-form" name="searchForm" hx-post="/search-api" hx-target="#search-result"></form>
<div class="search-wrapper">
  <div id="search-button" class="material-icons search-button md-8 md-light">search</div>
  <div class="search-bar-wrapper">
    <textarea name="search" type="text" class="search-bar" id="search-bar" form="search-form" placeholder="search" oninput="autoResize(this)"></textarea>
  </div>
</div>
<div id="search-result"></div>

But why not just a standard form with a button and a input element for a search string like below?

<form name="searchForm" hx-post="/search-api" hx-target="#search-result">
  <button type="submit">search</button>
  <input name="search" class="search-bar" placeholder="search">
</form>
<div id="search-result"></div>
chrwahl
  • 8,675
  • 2
  • 20
  • 30
  • Thank you for your answer. I used textarea because i want to resize my input box so that it doesn't scroll and do anything annoying like that. I build this website with only mobile support in mind so scrolling in textbox while having a webpage thats also scrolling is very annoying and in my opinion very ugly lol. Because im making the webpage with htmx, submitting via a javascript wouldnt work at all because it wouldnt trigger the htmx function, and it would also cause the website to refresh. In the end I just restyle the button lmao so yea i accidentally overcomplicated things sorry aboutdat – 6plosive Aug 20 '23 at 09:38
-2

You can insert a hidden input element inside the div, with its form Attribute specifying the form it's associated with. This input element lets you access its associated form through the form Property.

This way, you can process a click event on the div element, then call the requestSubmit method on its associated form.

<div class="material-icons search-button md-8 md-light" role="button" onclick="this.querySelector('input').getAttribute('form').submit()">
    <input type="hidden" form="search-form">
    search
</div>
Argavyon
  • 1
  • 3