How can I submit a POST form using the <a href="..."> tag?

Question

How can I submit a POST form to showMessage.jsp using just the <a href="..."> tag?

<form action="showMessage.jsp" method="post">
    <a href="showMessage.jsp"><%=n%></a>
    <input type="hidden" name="mess" value=<%=n%>/>
</form>

Kone

possible duplicate of Submit form using a link on JSP – Bautram

Answer 1

No JavaScript needed if you use a button instead:

<form action="your_url" method="post">
    <button type="submit" name="your_name" value="your_value" class="btn-link">Go</button>
</form>

You can style a button to look like a link, for example:

.btn-link {
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    color: #0000EE;
    padding: 0;
    text-decoration: underline;
    font-family: inherit;
    font-size: inherit;
}

Caa

Because your "method" does not use an a tag. – Beaubeauchamp

All well and good, but you've still chosen to answer a different question than was asked. And given that erasable ink is, in fact, a viable product produced on an industrial scale... – Beaubeauchamp

FWIW, I sympathize with your answer and it's what I personally would rather see in web apps I have to maintain. I'm just explaining the downvote - which I didn't leave, by the way. ;) – Beaubeauchamp

@Caa A reason why you might not want to use button: IE forces 3D "press" effects on you when you use button, which is easily avoided using a. If you style your button with display: inline-table, using a is the only way to avoid this effect, as the normal workaround of position: relative does not work. – Heurlin

That's an avoidable excuse to not use button for submitting though. – Otey

class="btn btn-link" for bootstrap – Arraignment

Worked perfectly for my needs! – Lannylanolin

Answer 2

You need to use javascript for this.

<form id="form1" action="showMessage.jsp" method="post">
    <a href="javascript:;" onclick="document.getElementById('form1').submit();"><%=n%></a>
    <input type="hidden" name="mess" value=<%=n%>/>
</form>

Russel

Answer 3

You have to use Javascript submit function on your form object. Take a look in other functions.

<form action="showMessage.jsp" method="post">
    <a href="javascript:;" onclick="parentNode.submit();"><%=n%></a>
    <input type="hidden" name="mess" value=<%=n%>/>
</form>

Adley

form element need not necessarily be always the parentNode of the anchor tag. – Russel

Answer 4

In case you use MVC to accomplish it - you will have to do something like this

 <form action="/ControllerName/ActionName" method="post">
        <a href="javascript:;" onclick="parentNode.submit();"><%=n%></a>
        <input type="hidden" name="mess" value=<%=n%>/>
    </form>

I just went through some examples here and did not see the MVC one figured it won't hurt to post it.

Then on your Action in the Controller I would just put <HTTPPost> On the top of it. I believe if you don't have <HTTPGET> on the top of it it would still work but explicitly putting it there feels a bit safer.

Cayuga

Answer 5

There really seems no way for fooling the <a href= .. into a POST method. However, given that you have access to CSS of a page, this can be substituted by using a form instead.

Unfortunately, the obvious way of just styling the button in CSS as an anchor tag, is not cross-browser compatible, since different browsers treat <button value= ... differently.

Incorrect:

<form action='actbusy.php' method='post'>
  <button type='submit' name='parameter' value='One'>Two</button>
</form>

The above example will be showing 'Two' and transmit 'parameter:One' in FireFox, while it will show 'One' and transmit also 'parameter:One' in IE8.

The way around is to use hidden input field(s) for delivering data and the button just for submitting it.

<form action='actbusy.php' method='post'>
   <input class=hidden name='parameter' value='blaah'>
   <button type='submit' name='delete' value='Delete'>Delete</button>
</form>

Note, that this method has a side effect that besides 'parameter:blaah' it will also deliver 'delete:Delete' as surplus parameters in POST.

You want to keep for a button the value attribute and button label between tags both the same ('Delete' on this case), since (as stated above) some browsers will display one and some display another as a button label.

Titania

Are you sure IE8 does that? Just tried <button value="Bad">Good</button> in IE7 and it displays "Good". – Caa

Answer 6

I use a jQuery script to create "shadow" forms for my POSTable links.

Instead of <a href="/some/action?foo=bar">, I write <a data-post="/some/action" data-var-foo="bar" href="#do_action_foo_bar">. The script makes a hidden form with hidden inputs, and submits it when the link is clicked.

$("a[data-post]")
    .each(function() {
        let href = $(this).data("post"); if (!href) return;
        let $form = $("<form></form>").attr({ method:"POST",action:href }).css("display","none")
        let data = $(this).data()
        for (let dat in data) {
            if (dat.startsWith("postVar")) {
                let varname = dat.substring(7).toLowerCase()  // postVarId -> id
                let varval = data[dat]
                $form.append($("<input/>").attr({ type:"hidden",name:varname,value:varval }))
            }
        }
        $("body").append($form)
        $(this).data("postform",$form)
    })
    .click(function(ev) {
        ev.preventDefault()
        if ($(this).data("postform")) $(this).data("postform").submit(); else console.error("No .postform set in <a data-post>")
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a data-post="/some/action" data-var-foo="bar" href="#do_action_foo_bar">click me</a>

Fong

Answer 7

A more modern approach is to use HTMX.

First, you'd include HTMX into your <head>, and then send it to your target, e.g. https://example.com/hello

<HTML>
  <head>
    <script src="https://unpkg.com/htmx.org"></script>
  </head>
  <body>
    <a href="#" hx-post="https://example.com/hello" hx-vals='{"mess": "my_value"}'>Submit</a>
  </body>
</html>

Quickie

Answer 8

A good method for overriding the http functions, if you are using express/node.js, is to use the npm package method-override. Method-override example.

Horrorstruck