POST from an <A> tag

Question

Is it possible to do a POST from just an <a> tag? I know anchor tags are usually just for GETs, and I know I can use javascript to do this (like in JavaScript post request like a form submit) but to me that seems a little messy. Is there a way to do this with straight HTML?

Schizo

Possible duplicate of Make a link use POST instead of GET – Noshow

Answer 1

There is no way to POST an a element using only HTML.

As can be seen from this DTD fragment (HTML 4.01 spec):

<!ELEMENT A - - (%inline;)* -(A)       -- anchor -->
<!ATTLIST A
  %attrs;                              -- %coreattrs, %i18n, %events --
  charset     %Charset;      #IMPLIED  -- char encoding of linked resource --
  type        %ContentType;  #IMPLIED  -- advisory content type --
  name        CDATA          #IMPLIED  -- named link end --
  href        %URI;          #IMPLIED  -- URI for linked resource --
  hreflang    %LanguageCode; #IMPLIED  -- language code --
  rel         %LinkTypes;    #IMPLIED  -- forward link types --
  rev         %LinkTypes;    #IMPLIED  -- reverse link types --
  accesskey   %Character;    #IMPLIED  -- accessibility key character --
  shape       %Shape;        rect      -- for use with client-side image maps --
  coords      %Coords;       #IMPLIED  -- for use with client-side image maps --
  tabindex    NUMBER         #IMPLIED  -- position in tabbing order --
  onfocus     %Script;       #IMPLIED  -- the element got the focus --
  onblur      %Script;       #IMPLIED  -- the element lost the focus --
  >

There is no attribute that controls whether to use POST or GET with an a element.

You have to script it, if you want to abuse the semantics.

Disturb

I like how you concluded with "if you want to abuse the semantics", i.e one shouldn't do this and should use the recommended way of doing such things, i.e using a form to submit data. – Clitoris

Answer 2

Not really, no. Ideally, style a button to look like a link:

.link-button {
  background: none;
  border: none;
  color: blue;
  cursor: pointer;
  display: inline;
  font: inherit;
  margin: 0;
  padding: 0;
  text-decoration: underline;
}

/* continue with :active and :focus-visible */

<form method="POST">
  <button class="link-button">Do the thing</button>
</form>

The only way to use a “real link” is to handle its click event with JavaScript:

<form action="theUrl" method="POST">
  <a href="javascript:;" onclick="this.parentNode.submit()">Do the thing</a>
</form>

But that’s a “real link” in tag name only – it doesn’t link to anything properly. It also doesn’t degrade gracefully when there’s no JavaScript support, is less accessible, has all the link features (copy link, open in new tab) but they don’t actually work, etc.

Hairstyle

Answer 3

Basically, you can't use an anchor tag for a POST request. However, there is a simple hack to achieve this.

<form id="myform" method="post" action="target.html"></form>
<a onclick="document.getElementById('myform').submit();">Submit to action</a>

Tested and working fine.

Quintessa

Answer 4

You can use CSS to make an <input type="submit"> look like a hyperlink.

Gavan

@VGE: Yes, but this can accomplish what he's trying to do. – Gavan

Answer 5

In case it serves somebody:

<a href="/your-route"
    onclick="event.preventDefault();
    document.getElementById('magic-form').submit();">
    Magic Action
</a>
<form id="magic-form" action="/your-route" 
      method="POST" style="display: none;">
      {{ csrf_field() }} <!-- from your framework -->
      <input type="hidden" name="field1" value="value1" />
      <!-- other fields -->
</form>

Floriculture

Answer 6

Simple answer: no. You need to use javascript to do this kind of thing; since when you do a POST what you're doing is sending the data in the HTTP request. With get you're just sending it as part of the string (thus you can do it through the href value).

Barge

Answer 7

No clearly not without a javascript submit().

Brasilein

Answer 8

No there's no way to do this without the use of scripting. Although you can use CSS to style a standard Submit button to look and act more like an tag.

Laureate

Answer 9

You can use htmx for this https://htmx.org/attributes/hx-post/

For example:

<script src="https://unpkg.com/[email protected]" integrity="sha384-L6OqL9pRWyyFU3+/bjdSri+iIphTN/bvYyM37tICVyOJkWZLpP2vGn6VUEXgzg6h" crossorigin="anonymous"></script>

<a hx-post="/account/enable"/>Some text</a>

Castano

Answer 10

The 2 ways I think about are with JavaScript (as you said) or through server-scription.

You'd basically send the GET request (with the A) to some server file, which would change the GET vars to POST and then re-submit instantly (redirect location). But that would mess the referer stats I think.

Fa

Answer 11

You should to add data-method="post"

For example: <a href="/some-link" data-method="post">Logout</a>

Repressive