Javascript: Sending Post, Redirecting To Response

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?

Solution 1:

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

<scripttype='text/javascript'>functionform_send(){
   f=document.getElementById('the_form');
   if(f){
     f.submit();
     }
   }
 </script><formmethod='post'action='your_post_url.html'id='the_form'><inputtype='hidden'value='whatever'></form><spanid='subm'onclick='form_send()'>Submit</span>

Solution 2:

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:

<imgsrc="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();

    varparams = "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.

Solution 3:

Instead of window.location = http.responseText use the following:

http.onreadystatechange = function() {
  if (http.readyState == 4 && http.status == 200) {
    document.open();
    document.write(http.responseText);
  }
}

document.open() clears the current content of the page and document.write() inserts the response html code into your page.

Solution 4:

You could use this function i made:

functionredirect_by_post(purl, pparameters, in_new_tab) {
    pparameters = (typeof pparameters == 'undefined') ? {} : pparameters;
    in_new_tab = (typeof in_new_tab == 'undefined') ? true : in_new_tab;

    var form = document.createElement("form");
    $(form).attr("id", "reg-form").attr("name", "reg-form").attr("action", purl).attr("method", "post").attr("enctype", "multipart/form-data");
    if (in_new_tab) {
        $(form).attr("target", "_blank");
    }
    $.each(pparameters, function(key) {
        $(form).append('<input type="text" name="' + key + '" value="' + this + '" />');
    });
    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);

    returnfalse;
}

$('#btn').button().click(function() {
    redirect_by_post('http://pamppi.info/jotform-testing/thankyou/postvars.php', {
        variable1: 'Carlos',
        variable2: 'Garcia'
    }, true);
});

Solution 5:

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.