Disable form auto submit on button click

javascript

event-prevention

form-submission

javascript-best-practices

byAnton Shumikhin·Dec 16, 2024

To prevent a form from auto-submitting when a button is clicked, set type="button" for the <button> or incorporate event.preventDefault() in the JavaScript click event handler.

<form id="myForm">
    <!-- Your form elements here -->
    <button type="button" onclick="noSubmit()">No Submit</button>
</form>

<script>
function noSubmit() {
    console.log("Boom! I don't auto-submit anymore!");
    // Your custom operations here
}
</script>

The "No Submit" button calls the noSubmit() function without invoking a form submission.

Going full control: Preventing the galactic auto-submit invasion

lasering through event prevention

Besides declaring type="button", a full-on defence against auto-submission is achieved by capturing submit events and calling event.preventDefault(). This provides a force field around the form:

document.querySelector('#myForm').addEventListener('submit', function(event) {
  event.preventDefault();
  console.log("Zap! Auto-submit invasion stopped!");
  // Optional: launching your intergalactic form operations from here
});

Great to use when you're engaged in battles like validation fights and async operations showdowns before triggering a form submission.

Inline taunts: Directly blocking auto-submission invasions

There's always the quick fisticuffs approach using our good old onclick='return false;' trick, squashing those nasty auto-submits.

<button onclick="console.log('Pow! Auto-submit invaders beaten!'); return false;">Invader Stopper Button</button>

It delivers a swift uppercut, though it might not be the secret weapon for larger operations due to its inline scripting nature.

jQuery: The wielder of elegant force fields

In the realm of jQuery and jQuery UI, stopping an auto-submit invasion has never looked so sleek and stylish:

$('form').on('submit', function(e) {
  e.preventDefault();
  console.log("Whoosh! Auto-submit invasion curtailed, jQuery style!");
});

This ensures the epic battle is fought separate from markup land, promising smoother operations and more resourceful war scripts.

Mastering the forces: The power of manual form submissions

After successfully quelling the auto-submit uprising, deliberate form submission can be executed with form.submit():

document.querySelector('#submitFormBtn').addEventListener('click', function() {
  console.log("Initiating counter-attack with manual form submission");
  document.getElementById('myForm').submit(); // Launching the form data transmission
});

Hence, even in face of complex incursions, like tackling with APIs or validation, you get to decide when the form submits.

HTML5 regulations: Decoding their default strategies

HTML5 sets the rules around default behaviours in battlefield conditions; importantly, failing to explicitly set a type attribute brands your button as a submit button. So, always enlist your button type:

<button type="button">The Non-Submitter</button>
<button type="submit">The Submitter</button>

Knowing the HTML5 battle playbook can dodge unintended friendly-fire from form submissions, boosting your defensive tactics.

Taming the sneak attack: Blocking keyboard-triggered submissions

Forms might try sneaky maneuvers like submitting via the Enter key. But it's an easy match for your prepared defences, by using key event handlers:

document.querySelector('#myForm').addEventListener('keypress', function (e) {
  if (e.key === 'Enter') {
    e.preventDefault();
    console.log("Nice try, Enter key! You can't auto-submit this form.");
  }
});