CODEWITHSUNDEEP
javascriptjquery
user4951834
user4951834

Reputation: 731

How to submit form to new window?

I want to insert a form dynamically using JavaScript and then submit it and open target in new window.

Here is my code:

            var form = document.createElement("form");
            form.setAttribute("method", "post");
            form.setAttribute("action", xxx);
            form.setAttribute("onsubmit", "window.open('about:blank','Popup_Window','scrollbars=yes,width=550,height=520');");
            form.setAttribute("target", "Popup_Window");

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

This code works -- it inserts the form dynamically and submits the form successfully. However, the form is opened in a new tab whereas I want it to open in a new window. Any idea what is up? Any suggestions on how to fix this? I'm open to jQuery as well.

Thanks!

EDIT: I'm not sure why people are marking this as duplicate. Yes, it is on the same topic as the other question but the answers are not related -- the claimed duplicate issue had a new line that was messing up the code, I don't but my code still won't work...

Upvotes: 10

Views: 22961

Answers (6)

คมสันต์ รักษาแสง
คมสันต์ รักษาแสง

Reputation: 1

If you mean new tab. Edit your code by add target attribute to form and delete popup target section.

var form = document.createElement("form");
form.setAttribute("target", "_blank");
form.setAttribute("method", "post");
form.setAttribute("action", xxx);
document.body.appendChild(form);
form.submit();

Upvotes: 0

gufruela
gufruela

Reputation: 1

for security reasons I needed something similar. I have to block the GET method and only allow the POST method so to display a PDF inside a popup window I used this code:

  • url: is a url to show.

  • mywindow: name of window.

  • parameter:'width=300,height=200' size

      var windowopen = function(url,mywindow,parameter) {
  var form = document.createElement('form');
  form.setAttribute("method",'POST');
  form.setAttribute("action",url);
  form.autofocus=true;
  function popupw(f){ 
      var mypopup = window.open('',mywindow,parameter);
      f.setAttribute("target", mywindow);
      document.body.appendChild(f);
      f.submit();
  }
  popupw(form);

    };

Upvotes: 0

Muhammad Umer
Muhammad Umer

Reputation: 18097

You could do this instead [link],

  1. open a new window
  2. insert form in it
  3. make it submit

  4. which will navigate to url

    var form = document.createElement("form");

form.setAttribute("method", "post");
form.setAttribute("action", "http://www.yahoo.com");


function popitup() {
    newwindow = window.open('', 'name', 'width=800,height=600');
    if (window.focus) {
        newwindow.focus()
    }
    newwindow.document.body.appendChild(form);
    newwindow.document.forms[0].submit();
    return false;
}

popitup();

Upvotes: 5

boateng
boateng

Reputation: 898

If you want to always keep a popup "focused" you can use a trick originally found here. By rapidly open/close/open it we ensure it's always behaves like new window and grabs focus.

 <form name=f1 method=post action=test.html>

  <input type=text name=name value='123'>

  <input type='submit' value='Submit' 

  onclick="if(window.open('','reuse_win') != null) {
       window.open('','reuse_win').close();
    }; this.form.target='reuse_win'; return true;">

</form>

Also works with a link.

<a href="http://stackoverflow.com" onclick="
if(window.open('','reuse_win') != null) {
   window.open('','reuse_win').close();
}" target="reuse_win">Always opens in the same window and FOCUS</a>

Upvotes: 0

Danziger
Danziger

Reputation: 21161

I've marked this as duplicate because I thought your problem was about how to send a form to a popup window. Here is how to do it without using the onsubmit event:

var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", xxx);

function submitToPopup(f) {
    var w = window.open('', 'form-target', 'width=600, height=400, any-other-option, ...');
    f.target = 'form-target';
    f.submit();
};

document.body.appendChild(form);

submitToPopup(form);

So instead of using the onsubmit event to create the popup from there, you create it first, just before sending the form, and then send the form to it.

Upvotes: 10

Harsha Kuchampudi
Harsha Kuchampudi

Reputation: 153

To my knowledge, most browsers and ad blockers will block this kind of script from opening a new window because it is autorun. However, if you implement it like this where the user must click a link: JSFiddle it is more likely to open in a new window.

Using jQuery:

$('.open-popup').click(function(e) {
    e.preventDefault();
    var form = document.createElement("form");
    form.setAttribute("method", "post");
    form.setAttribute("action", "");
    document.body.appendChild(form);
    form.submit();
    window.open(this.href, '_blank', 'width=300,height=200');
});

HTML:

<a href="about:blank" class="open-popup">Click Me</a>

Also, some browsers have preferences that disable opening in a new window automatically. So you may want to explore alternatives or simply ask users to open the link in a new tab.

Upvotes: 1

Related Questions