JavaScript: Sending POST, redirecting to response

Question

I have an image with an onclick. When the click event fires, I want to send an HTTP POST and have the window.location redirect to the response to the POST. How can I do that?

Answer 1

Assuming you require to send the POST request asynchronously, you may want to check the example below to get you going in the right direction:

<img src="my_image.png" onClick="postOnClick();">

Then you require a JavaScript function that submits an asynchronous HTTP POST request and redirects the browser to a URL received from the HTTP response. You should be able to use XMLHttpRequest for such an asynchronous call, as in the following example:

function postOnClick()
{
    var http = new XMLHttpRequest();

    var params = "arg1=value1&arg2=value2";

    http.open("POST", "post_data.php", true);

    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http.setRequestHeader("Content-length", params.length);
    http.setRequestHeader("Connection", "close");

    http.onreadystatechange = function() {
        if (http.readyState == 4 && http.status == 200) {
            window.location = http.responseText;
        }
    }

    http.send(params);
}

Note that for a truly cross-browser XMLHttpRequest call, you may want to use a standard-compliant cross-browser XMLHttpRequest implementation like XMLHttpRequest.js, unless you are using some JavaScript framework like jQuery, Prototype, YUI, ExtJS, et al.

In addition, also note that the above will only work if you are posting to a script hosted within the same domain, otherwise you will be violating the same-origin policy and modern web browsers will refuse to send the request.

Answer 2

Use a input type image.

<form action="someUrl.html" method="POST">
    <input type="image" src="img.png" width="30" height="30" alt="Submit">
</form>

When clicking on the image you will be redirected to "someUrl.html" and a post will be sent to it

Answer 3

Just bind the button to the submit method of a form element, and the redirect will happen naturally.

<script type='text/javascript'>
 function form_send(){
   f=document.getElementById('the_form');
   if(f){
     f.submit();
     }
   }
 </script>

<form method='post' action='your_post_url.html' id='the_form'>
  <input type='hidden' value='whatever'>
</form>

<span id='subm' onclick='form_send()'>Submit</span>

Answer 4

Using jQuery post the data and redirect to your desired location like so:

$.ajax({
  type: 'POST',
  url: 'receivedata.asp',
  data: 'formValue=someValue',
  success: function(data){
      window.location = data;
  }
});

You could remove the data: 'formValue=someValue', if there is no data to pass to the page you want to post to.