Performing a POST in window.open()

Question

I'm trying to open a popup and I'd like to send data using the post method when it opens. Can anyone help me.

I am getting "Uncaught syntax error. Unexpected token }"

function MapIt(){    
    var ListIds = selected_Listings.join();
    if (navigator.appName == "Microsoft Internet Explorer") {
        var opts = "screenX=0,screenY=0,width=" + screen.width + ",height=" + screen.height;
    } else {
        var opts = "outerWidth=" + screen.availWidth + ",outerHeight=" + screen.availHeight + ",screenX=0,screenY=0";
    }    
    var urlStr = "http://www.dev.theabc.com/bingmaps/Map  ";     
    $('<form action=' + urlStr + ' ' + ' target="submission" onsubmit="window.open("", "Map",' + opts + ' "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes");return true;" method="post"><input type="hidden" name="listid" value="' + ListIds + '"></form>').submit();
}

This will likely cause a problem, `onsubmit="window.open("",` — Kevin B, Jan 22 '14 at 19:46

CodeHacker · Answer 1 · 2014-01-22T21:39:02.090

1

Actually... your syntax is wrong in the form It should look like this

$('<form action="'+urlStr+' target="submission" onsubmit="window.open(\'http://www.google.com\',\'Map\',\''+opts+',toolbar=no,location=no,directories=no,status=no,menubar=yes,scrollbars=yes,resizable=no\');return true;" method="post"><input type="hidden" value="'+ListIds+'"></form>').submit();

You have to escape the " inside the string... oh and a coma is missing after the opts...

<html>
<head>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
  <script type='text/javascript'>
  $(function(){
   MapIt = function() {
     ListIds = '1234';//selected_Listings.join();
     if (navigator.appName == "Microsoft Internet Explorer") {
       var opts = "screenX=0,screenY=0,width=" + screen.width + ",height=" + screen.height;
    } else {
      var opts = "outerWidth=" + screen.availWidth + ",outerHeight=" + screen.availHeight + ",screenX=0,screenY=0";
    }

   var urlStr = "http://wwwd.dev.theabc.com/bingmaps/Map";
   $('<form action="'+urlStr+' target="submission" onsubmit="window.open(\'http://www.google.com\',\'Map\',\''+opts+',toolbar=no,location=no,directories=no,status=no,menubar=yes,scrollbars=yes,resizable=no\');return true;" method="post"><input type="hidden" value="'+ListIds+'"></form>').submit();
}
});
</script>
</head>
<body>
 <button id="run" onclick="MapIt()">run</button>
</body>
</html>

edited Jan 22 '14 at 21:39

answered Jan 22 '14 at 19:51

CodeHacker

1,933
18
30

I am not clear what you are saying. can u pls put an example. – BumbleBee Jan 22 '14 at 19:59
Edited the answer and tested it on IE,Chrome and Firefox – CodeHacker Jan 22 '14 at 21:43
thank you. I had to remove action because this was causing a postback on the parent page. Now the form tag looks like : $('
').submit(); --- But the problem is the POST is not happening. (I want to post listid ) – BumbleBee Jan 22 '14 at 23:15
Well actually it should.. but it is the url in the action that is getting the Post (http://wwwd.dev.theabc.com/bingmaps/Map).. The Url in window.open, can read the elements of its parent window (window.opener)... so in http://www.google.com page it can read it like window.opener.forms[0].HiddenElementId.... But for that your hidden element must have an Id in this sample it is missing... – CodeHacker Jan 22 '14 at 23:42
I did add the id for the hidden element. – BumbleBee Jan 22 '14 at 23:46
1

Since you didn't wanted that Postback... why use a form anyway? you can just have a button that makes window.open... and in that opened window read the input element(s) form window.opener... window.opener.getElementById('theID').value **not a name an id**! – CodeHacker Jan 22 '14 at 23:50

score 1 · Accepted Answer · edited May 23 '17 at 10:31

After knowing that you don't realy wanted a post.

<html>
 <head>
   <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
   <script type='text/javascript'>
   $(function(){
     MapIt = function() {
       ListIds = '1234';//selected_Listings.join();
       if (navigator.appName == "Microsoft Internet Explorer") {
         var opts = "screenX=0,screenY=0,width=" + screen.width + ",height=" + screen.height;
       } else {
         var opts = "outerWidth=" + screen.availWidth + ",outerHeight=" + screen.availHeight + ",screenX=0,screenY=0";
       }
       $('#myHidden').val(ListIds);
       window.open('opener.html','Map', opts+',toolbar=no,location=no,directories=no,status=no,menubar=yes,scrollbars=yes,resizable=no');

     }
    });
   </script>
 </head>
 <body>
  <button id="run" onclick="MapIt()">run</button>
  <input type="hidden" id="myHidden">
 </body>
</html>

An then in your opener.html

<html>
 <head>
   <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
   <script type='text/javascript'>
     $(function(){
        var listIds = window.opener.document.getElementById('myHidden').value;
    $('#valuesRead').text(listIds);
      });
   </script>
 </head>
 <body>
   <span id="valuesRead"></span>
 </body>
</html>

BEWARE This has in some browsers (Chrome for one) security objections if you run it locally

After all this time I spend for your problem... would you accept it as an answer? — CodeHacker, Jan 23 '14 at 00:23

Performing a POST in window.open()

2 Answers2

Linked