Send POST data on redirect with JavaScript/jQuery?

javascript

javascript-post

redirect-url

post-data

byAnton Shumikhin·Mar 6, 2025

Let's unlock the mystery of sending a POST request and redirecting with JavaScript. Here's a brief code snippet that accomplishes this:

fetch('YOUR_ENDPOINT', { // Replace with your actual endpoint
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ key: 'value' }), // Hardest decision: tab or space?
})
.then(response => {
  // If the server gives us a green light, let's speed up!
  if (response.ok) window.location.href = 'REDIRECT_URL'; // Slash! No, not the guitarist. Your redirect URL.
})
.catch(console.error); // We don't make mistakes, just happy little accidents.

Above, we POST data asynchronously to YOUR_ENDPOINT. Upon successful response, it redirects to REDIRECT_URL.

Submitting a hidden form

To redirect while also sending POST data, you can create and submit a hidden form with JavaScript. This ensures the URL stays sweep-and-tidy:

function postToUrl(path, params, method) {
  method = method || "post"; // Fallback to POST if no method is specified
  
  var form = document.createElement("form"); // Form, meet world. World, meet form.
  form.setAttribute("method", method);
  form.setAttribute("action", path);

  for (var key in params) { // Our data, as unique as a snowflake in a snowstorm
    if (params.hasOwnProperty(key)) {
      var hiddenField = document.createElement("input");
      hiddenField.setAttribute("type", "hidden");
      hiddenField.setAttribute("name", key);
      hiddenField.setAttribute("value", params[key]);

      form.appendChild(hiddenField); // Everybody, hold hands. Or append.
    }
  }

  document.body.appendChild(form); // Form: "Am I adopted?" Body: "No, but you're appended."
  form.submit();
}

postToUrl('REDIRECT_URL', { Return_URL: 'RETURN_URL', Username: 'USERNAME' }); // Party at REDIRECT_URL. BYOD. (Bring Your Own Data)

The user's experience stays free-flowing as the POST and redirect happen under the hood.

Redirecting like a rockstar

Sometimes, things get tricky. Be it buzz-killing CORS policies or a need for an extra helping of functionality. In such instances, Axios or $.post() jazzed-up with $.extend might be your gig:

$.extend({
  redirectPost: function(location, args) {
    var form = '';
    $.each(args, function(key, value) {
      form += '<input type="hidden" name="'+key+'" value="'+value+'">'; // Hide and seek champion
    });
    $('<form action="'+location+'" method="POST">'+form+'</form>').appendTo('body').submit(); // Enter stage right -> Submit
  }
});

$.redirectPost('REDIRECT_URL', { Return_URL: 'RETURN_URL', Username: 'USERNAME' }); // Road trip! First stop, REDIRECT_URL!

Plugin fans, rejoice! jquery.redirect makes handling POST redirects seem as easy as ABC:

$.redirect('REDIRECT_URL', { Return_URL: 'RETURN_URL', Username: 'USERNAME' }, "POST"); // "I'll make him a redirect he can't refuse."

Safety first!

Digital world isn't free from bandits and rogues eyeing your key-value treasures. Avoid injection vulnerabilities like a pro. Validate and encode input values for a safe ride to the server.

explain-codes / Javascript / Send POST data on redirect with JavaScript/jQuery?

Linked

Submit form using a button outside the <form> tag



How to submit an HTML form without redirection



Jquery - Redirect with post data



After submitting a POST form open a new window showing the result



Javascript post request like a form submit

