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

html

responsive-design

form-submission

css

byAnton Shumikhin·Oct 19, 2024

You can POST a form using an <a> link with the help of onclick handler which facilitates form submission through JavaScript. Here's the practical code snippet:

<form id="myForm" method="post" action="server-endpoint.php">
  <!-- Insert 'Back to the Future' DeLorean flux capacitor here -->
</form>
<a href="javascript:void(0);" onclick="document.getElementById('myForm').submit();">Initiate Time Travel</a>

By clicking the link, you'll trigger the form identified by myForm. Thanks to href="javascript:void(0);", time stands still and the POST request is made - go figure, Marty McFly!

Disguising a button as a link (the Clark Kent approach)

Sometimes, you want your <button> to carry out a perfect link cosplay. This is where CSS swoops in to save the day:

button.link-button {
  background: none;
  border: none;
  color: blue;
  text-decoration: underline;
  cursor: point-and-click-adventure;
  font-size: 1em;
  font-family: Comic Sans MS, sans-serif;
}

button.link-button:hover,
button.link-button:focus {
  text-decoration: Sequence Initiated;
}

Implement this class and your <button> will be indistinguishable from an <a> tag for all but the keenest of eyes, all the while keeping all button directed functionalities intact.

Controlling form submission with JavaScript

Whenever you need to tweak the action or parameters on the fly, JavaScript jumps to your rescue:

document.getElementById('linkSubmit').addEventListener('click', function() {
  var myForm = document.getElementById('myForm');
  myForm.action = '/DataRetrieval.exe'; // If this reference isn't old, I don't know what is!
  myForm.appendChild(hiddenInput); // Stealthily appending new inputs - Ninja mode
  myForm.submit();
});

You're basically creating your own JS cheat codes. Insert a Reddit smiley here.

A spy's secrets: Hidden values in forms

In case you need to sneak in some data unseen by the prying eyes, use <input type="hidden">:

<form id="myForm" method="post" action="submit.php">
  <input type="hidden" name="secret" value="<%=n%>">
  <!-- More visible inputs -->
</form>

This cloak-and-dagger data is effortlessly packaged in the POST payload and will be decrypted on the server-side.

Mastering MVC patterns

When navigating the Model-View-Controller (MVC) labyrinth, remember to bless your Controller Action with [HttpPost], ensuring it's only accessible via a POST request:

[HttpPost]
public ActionResult SubmitData(MyModel model) {
  // The magic happens here
}

By doing so, your client-side form and server-side processing will shake hands and play ball without a hitch.

Routing against default behaviors

As part of the clandestine anchor tags operations playbook, remember to throw the default action off guard:

document.getElementById('linkRedirect').addEventListener('click', function(event) {
  event.preventDefault(); // Stops the scrolling NASCAR in its tracks 
  //... Initiate form submission protocol
});

This will keep your clicking spree from altering the URL or triggering unexpected scrolling.

Respecting browser differences

Pay attention to visual customization—because not everything that shines in Chrome sparkles in Safari:

Leverage browser-specific pseudo-classes to execute flawless operations.
Test your missions on different stages to ensure consistent appearance.
Use vendor prefixes if CSS demands them.

Form's captivating structure

Don’t compromise the semantic form structure to keep your form accessible and Google-friendly:

Right <label> placement enhances accessibility.
Input types (type="email", type="url") improve user experience and form validation.
Clean form controls arrangement using the <fieldset> and <legend> dynamic duo.