Javascript window.open pass values using POST

Question

I have a javascript function that uses window.open to call another page and returning the result.

Here is the section of my code:

var windowFeatures = "status=0, toolbar=0, location=0, menubar=0, directories=0, resizable=1, scrollbars=1";
window.open ('http://www.example.com/index.php?p=view.map&coords=' + encodeURIComponent(coords), 'JobWindow', windowFeatures);

My problem now is that I am passing too much data for the GET to handle and I need to pass it using the POST method.

How can I convert the code above to open the page using the POST method without implement forms all over the page (the page lists 100's of orders with a list of suppliers - I am trying to map the suppliers)

php-b-grader · Accepted Answer · 2011-04-17 03:43:11Z

91

I used a variation of the above but instead of printing html I built a form and submitted it to the 3rd party url:

    var mapForm = document.createElement("form");
    mapForm.target = "Map";
    mapForm.method = "POST"; // or "post" if appropriate
    mapForm.action = "http://www.url.com/map.php";

    var mapInput = document.createElement("input");
    mapInput.type = "text";
    mapInput.name = "addrs";
    mapInput.value = data;
    mapForm.appendChild(mapInput);

    document.body.appendChild(mapForm);

    map = window.open("", "Map", "status=0,title=0,height=600,width=800,scrollbars=1");

if (map) {
    mapForm.submit();
} else {
    alert('You must allow popups for this map to work.');
}

answered Apr 17, 2011 at 3:43

php-b-grader

3,33411 gold badges47 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Fedor Over a year ago

I think document.body.appendChild(mapForm); is redundant here and can be safely omitted to not clutter DOM up.

Mancy Over a year ago

@Fedor removing that line will result in blank popup on firefox

Fedor Over a year ago

@Mancy thanks for the remark, hadn't thought about Firefox

Ruthe Over a year ago

if you don't worry about your data | window.open('xxx_url.php?xxx_var='+xxx_var+'&xxx2_var='+xxx2_var, '_blank');

user1854856 Over a year ago

@rut There is a difference between sending data as GET and POST command. The question was about sending data with the POST command.

Facundo Victor · Accepted Answer · 2013-06-13 14:26:45Z

57

Thank you php-b-grader. I improved the code, it is not necessary to use window.open(), the target is already specified in the form.

// Create a form
var mapForm = document.createElement("form");
mapForm.target = "_blank";    
mapForm.method = "POST";
mapForm.action = "abmCatalogs.ftl";

// Create an input
var mapInput = document.createElement("input");
mapInput.type = "text";
mapInput.name = "variable";
mapInput.value = "lalalalala";

// Add the input to the form
mapForm.appendChild(mapInput);

// Add the form to dom
document.body.appendChild(mapForm);

// Just submit
mapForm.submit();

for target options --> w3schools - Target

edited Jun 13, 2013 at 14:26

answered Jun 13, 2013 at 14:05

Facundo Victor

3,5381 gold badge28 silver badges21 bronze badges

1 Comment

The Coprolal Over a year ago

The OP has a ton of windowFeatures to pass to the popup window. This is not possible with your solution. Only window.open() based solutions can do this elegantly

reformed · Accepted Answer · 2017-04-18 22:03:01Z

56

For what it's worth, here's the previously provided code encapsulated within a function.

openWindowWithPost("http://www.example.com/index.php", {
    p: "view.map",
    coords: encodeURIComponent(coords)
});

Function definition:

function openWindowWithPost(url, data) {
    var form = document.createElement("form");
    form.target = "_blank";
    form.method = "POST";
    form.action = url;
    form.style.display = "none";

    for (var key in data) {
        var input = document.createElement("input");
        input.type = "hidden";
        input.name = key;
        input.value = data[key];
        form.appendChild(input);
    }

    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
}

edited Apr 18, 2017 at 22:03

answered Apr 18, 2017 at 21:49

reformed

4,82813 gold badges69 silver badges95 bronze badges

4 Comments

user4664714 Over a year ago

IMHO This is the best of the answers. Note that it takes care of removing the form after is sent, cleaning the DOM. It is also written as a ready to use function. Good work

Shark Lasers Over a year ago

document.body.removeChild(form); for me, this line ensured that the input fields were hidden

The Coprolal Over a year ago

the problem with this is that you cannot pass windowFeatures as you can do with window.open()

reformed Over a year ago

Obviously I posted this well after the OP received an answer that includes windowFeatures. This solution works great for those who don't need windowFeatures.

Chirag · Accepted Answer · 2017-11-10 06:22:27Z

thanks php-b-grader !

below the generic function for window.open pass values using POST:

function windowOpenInPost(actionUrl,windowName, windowFeatures, keyParams, valueParams) 
{
    var mapForm = document.createElement("form");
    var milliseconds = new Date().getTime();
    windowName = windowName+milliseconds;
    mapForm.target = windowName;
    mapForm.method = "POST";
    mapForm.action = actionUrl;
    if (keyParams && valueParams && (keyParams.length == valueParams.length)){
        for (var i = 0; i < keyParams.length; i++){
        var mapInput = document.createElement("input");
            mapInput.type = "hidden";
            mapInput.name = keyParams[i];
            mapInput.value = valueParams[i];
            mapForm.appendChild(mapInput);

        }
        document.body.appendChild(mapForm);
    }


    map = window.open('', windowName, windowFeatures);
if (map) {
    mapForm.submit();
} else {
    alert('You must allow popups for this map to work.');
}}

early · Accepted Answer · 2015-02-05 20:06:10Z

2

Even though this question was long time ago, thanks all for the inputs that helping me out a similar problem. I also made a bit modification based on the others' answers here and making multiple inputs/valuables into a Single Object (json); and hope this helps someone.

js:

//example: params={id:'123',name:'foo'};

mapInput.name = "data";
mapInput.value = JSON.stringify(params);

php:

$data=json_decode($_POST['data']); 

echo $data->id;
echo $data->name;

edited Feb 5, 2015 at 20:06

answered Feb 5, 2015 at 17:14

early

5427 silver badges15 bronze badges

Comments

Heretic Monkey · Accepted Answer · 2017-03-17 21:02:16Z

The code helped me to fulfill my requirement.

I have made some modifications and using a form I completed this. Here is my code-

Need a 'target' attribute for 'form' -- that's it!

Form

<form id="view_form" name="view_form" method="post" action="view_report.php"  target="Map" >
  <input type="text" value="<?php echo $sale->myvalue1; ?>" name="my_value1"/>
  <input type="text" value="<?php echo $sale->myvalue2; ?>" name="my_value2"/>
  <input type="button" id="download" name="download" value="View report" onclick="view_my_report();"   /> 
</form>

JavaScript

function view_my_report() {     
   var mapForm = document.getElementById("view_form");
   map=window.open("","Map","status=0,title=0,height=600,width=800,scrollbars=1");

   if (map) {
      mapForm.submit();
   } else {
      alert('You must allow popups for this map to work.');
   }
}

Full code is explained showing normal form and form elements.

Collectives™ on Stack Overflow

Javascript window.open pass values using POST

6 Answers 6

5 Comments

1 Comment

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

1 Comment

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related