How to submit a form with JavaScript by clicking a link?

javascript

event-listeners

form-submission

accessibility

byAnton Shumikhin·Sep 10, 2024

Here, you attach a click event to the link to prevent its default action and call the form's submit() method:

<a href="javascript:void(0);" id="submit-link">Submit</a>
<form id="form-to-submit">
  <!-- Add your form inputs here -->
</form>

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('submit-link').addEventListener('click', function(event) {
    event.preventDefault(); // Stop! Link time!
    document.getElementById('form-to-submit').submit(); // Ta-da! Form is gone!
  });
});

While preparing your forms and their JS handlers, don't forget about compatibility and edge cases. Handle any potential conflicts with pre-existing event listeners or scripts on the page.

Step up your accessibility game

A visually nice link might be a nightmare for accessibility. A user with a keyboard or assistive tech should submit a form as easily as a mouse user. So, ensure your form elements—input and select—have appropriate labels, and if needed, the link might require a role attribute:

<a href="javascript:void(0);" id="submit-link" role="button">Submit</a>

For a link-like button or a button-like link, you might prefer a button with some CSS magic to give it a link's appearance:

<button type="submit" id="submit-button" style="appearance: none; background: none; border: none;">
  Submit
</button>

Solve those tricky situations

Forms with multiple event listeners

When a form has more than one submit handlers, your new listener should play nice with others. Maybe it should bow to the existing ones or just show them who's boss. This demands adding a hidden input type submit within the form:

<form id="form-to-submit">
  <input type="submit" style="display: none;" />
</form>

document.getElementById('submit-link').addEventListener('click', function() {
  // Insert sneaky JavaScript manoeuvres here
  document.getElementById('form-to-submit').querySelector('[type="submit"]').click();
});

Play nice with JavaScript and the form

When you integrate with other scripts or frameworks, remember their initialization processes. For instance, jQuery isn't a regular JavaScript, it's a cool JavaScript. Ensure your form submission remains consistent in every situation:

// jQuery is so "ready" for this
$(document).ready(function() {
  $('#submit-link').click(function(e) {
    e.preventDefault();
    $(this).closest('form').submit(); // Gotcha form!
  });
});

All about that link appearance

The look of your form submission link can shape the perception of your user. Style this link to blend with the webpage or to stand out. You can add a hover effect with :hover:

#submit-link:hover {
  cursor: pointer;
  text-decoration: underline;
  color: blue;
}

Give feedback, good or bad

When the form submits, the user appreciates a pat on the back. It might be a message, a redirection, or a fancy animation indicating the processing status. Handle this within the event listener after the form submission.

explain-codes / Javascript / How to submit a form with JavaScript by clicking a link?

Linked

Can I make a `` not submit a form?



Use a normal link to submit a form



Submit form using a button outside the <form> tag



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



Html - how to make an entire DIV a hyperlink?

