Prevent form redirect OR refresh on submit?

javascript

ajax

event-handling

ui-interactions

byAlex Kataev·Mar 2, 2025

To stop form submission from causing refresh or redirection, make use of JavaScript's event.preventDefault() method within the form's submit event. Here's a compact pattern:

<form id="formID">
  <!-- form fields go here -->
</form>
<script>
  document.querySelector('#formID').onsubmit = function(event) {
    event.preventDefault();  // Freeze! 🚨
    // Handle form data here
  };
</script>

Replace #formID with the ID of your form and put the <script> tag before the closing </body> tag for optimal performance. This ensures the form stays put without triggering a page refresh or redirect.

AJAX for smooth form submission

Kick up your user experience a notch with asynchronous form processing via AJAX. The jQuery library makes setting this up a breeze, allowing seamless data transmission without interfering with the user's interaction. Here's a barebones example:

$('#contactForm').submit(function(event) {
  event.preventDefault(); // Stop! Hammer time! 💃
  $.ajax({
    url: "/path/to/script",
    type: "POST",
    data: $(this).serialize(),
    success: function(data) {
      // All systems go! 🚀
    },
    error: function() {
      // Houston, we have a problem! 🚫
    }
  });
});

Now you've got a seamless asynchronous form submission happening in harmony with your UI feedback, thanks to AJAX.

Handling complex interactions: it's not rocket science!

Error handling and messaging

We're not in the Stone Age anymore! Provide instant feedback to your users utilizing the .done(), .fail() and .always() methods that jQuery offers:

$.ajax({
  // ... AJAX settings ...
}).done(function(data) {
  // Party time! 🎉
}).fail(function() {
  // Bummer! 😞
}).always(function() {
  // cleaning up the aftermath 🧹
});

Troubleshooting and conflict resolution

If things go sideways, slap on your detective hat and check the console for any JavaScript conflicts or errors. Make sure that return false; or event.stopPropagation(); aren't sneaking about causing more trouble.

Add some flair with UI interactions

Reward your users with cool and user-friendly UI effects like slideDown() or slideUp() on submission:

$('#contactForm').submit(function(event) {
  // ... AJAX settings ...
}).done(function() {
  $('#successMessage').slideDown();
  setTimeout(function() {
    $('#successMessage').slideUp();
  }, 5000); // User now thinks you're a wizard. 🧙
});

Other considerations: don't trip on the last hurdle

Additional fallback mechanisms

Including action="#" or action="javascript:void(0);" in your <form> tag can be a solid safety net and prevents the page from redirecting should JavaScript take the day off.

Code organization is key

Structure your code so that your form logic is like a well-oiled machine, separate from UI interactions. Arrange your event handlers and functions in a clear and simple manner to avoid spinning a web of mystery.