POST request on button click

Question

<form action="shorturl" method="POST">
  <div class="search-box">
    <input class="search-txt" type="text" name="" placeholder="https://">
    <a class="search-btn">
      <i class="fa-solid fa-minimize"></i>
    </a>
  </div>
</form>

I made a button in CSS out of the tag, but for some reason, when I click on it, I can't get a post request.

I tried this

<a class="search-btn" action="shorturl" formmethod="POST">

but nothing

and this

<a class="search-btn" href="shorturl" formmethod="POST">

which gives a get request

score 0 · Answer 1 · answered Jan 08 '23 at 01:08

Since there is no formmethod attribute on the tag, the form must be submitted using <button type="submit">. (If JavaScript is not used)

<form action="shorturl" method="POST">
  <div class="search-box">
    <input class="search-txt" type="text" name="" placeholder="https://">
    <button class="search-btn" type="submit">
      <i class="fa-solid fa-minimize"></i>
    </a>
  </div>
</form>

Or if you use JavaScript:

<form action="shorturl" method="POST" id="searchForm">
  <div class="search-box">
    <input class="search-txt" type="text" name="" placeholder="https://">
    <a class="search-btn" id="searchBtn">
      <i class="fa-solid fa-minimize"></i>
    </a>
  </div>
</form>

document.getElementById("searchBtn").addEventListener("click", () => {
  document.getElementById("searchForm".submit();
});

POST request on button click

1 Answers1