How to open a new window on form submit

Question

I have a submit form and want it to open a new window when users submits the form so i can track it on analytics.

Here is the code I'm using:

<form action="http://URL at mailchimp subscriber URL.com" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" onclick=window.open(google.html,'','scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');>
    <label for="name">Your Name</label><input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
    <br/>
    <br/>
    <label for="email">Your Email </label><input type="text" value="" name="EMAIL" class="required email" id="mce-EMAIL">
    <br/>
    <br/>
    <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="submit">
</form>
</div>

score 333 · Answer 1 · edited Aug 14 '15 at 14:21

333

No need for Javascript, you just have to add a target="_blank" attribute in your form tag.

<form target="_blank" action="http://example.com"
      method="post" id="mc-embedded-subscribe-form"
      name="mc-embedded-subscribe-form" class="validate"
>

edited Aug 14 '15 at 14:21

Ed Schwehm

2,163
4
32
55

answered May 22 '09 at 07:34

Kostas Konstantinidis

13,347
10
48
61

5

if you add the target=_blank, you don'y need the onClick event. – WhyNotHugo May 22 '09 at 07:48
This is still wrong, for multiple reasons. Most of the quoting's missing, and it will fire anytime the form is clicked for any reason, not only at submit. – Matthew Flaschen May 22 '09 at 07:50
5

Glad to have stumbled upon this post! Adding target="_blank" to the form tag solved my problem of needing to open a new window! – kaitlynjanine Aug 21 '12 at 21:07
4

this doesn't exactly answer the OP's question, but it is the more useful answer in general- use `target="_blank"` instead of Javascript – Kip Oct 18 '12 at 13:58
2

target="blank" works just fine. https://developer.mozilla.org/en-US/docs/HTML/Element/form – Eric Oct 24 '12 at 20:19
7

at least on IE 11, target="_blank" creates a new tab in the current browser window instead of creating a new browser window..... IMHO, a new tab is different than a new browser window – bovino Marcelo Bezerra Oct 02 '15 at 20:44
If I remember right the target attribute lets you name the window and reuse it _blank means just keep creating new windows. So, target="blank" will be naming the window "blank", if that makes sense. – Ghoti Nov 16 '15 at 16:52
2

Actually, target='_blank' will open a new tab, not a new WINDOW as the original question states. – Manny Ramirez Jul 28 '16 at 16:29
3

The correct solution to "open a new window" is `target="_blank"`. Whether the new window is added as a tab is a browser choice. Many modern browsers deem it a better user experience to add new windows as tabs. – Kilpatrick Jul 06 '17 at 16:51
If there any way to get the reference to the new window that is created on form submission this way? I need to know when that window is closed. – Sнаđошƒаӽ Aug 13 '18 at 23:54

score 46 · Answer 2 · edited Jun 13 '18 at 14:56

46

In a web-based database application that uses a pop-up window to display print-outs of database data, this worked well enough for our needs (tested in Chrome 48):

<form method="post" 
      target="print_popup" 
      action="/myFormProcessorInNewWindow.aspx"
      onsubmit="window.open('about:blank','print_popup','width=1000,height=800');">

The trick is to match the target attribute on the <form> tag with the second argument in the window.open call in the onsubmit handler.

edited Jun 13 '18 at 14:56

KyleMit

30,350
66
462
664

answered Feb 15 '16 at 23:54

Awerealis

602
6
9

1

This gives window size control. Excellent. – Chalky Jul 05 '16 at 08:59
1

best solution in this page, tested it and works to perfection. – Manny Ramirez Aug 05 '16 at 00:53
2

This is exactly what I was looking for when generating a PDF into a separate window on submit. – jrob007 Jan 22 '18 at 22:09
1

OMG, memories :) I used that method in Netscape around 1995 ! you could adjust the size of window, how big, even the position. – Stephane Marchand Jun 09 '22 at 00:06
Late to the party but I just spent 3 days trying to get popup windows using JavaScript to submit necessary behind the scenes jQuery values to my database, something which is plain trivial to do in PHP. (I'm building a roll-your-own blog, a page with multiple submit buttons). This is exactly the solution I've been looking for. Mucho thanks! – whatshisname May 17 '23 at 17:38

score 14 · Answer 3 · answered Mar 18 '16 at 16:37

For a similar effect to form's target attribute, you can also use the formtarget attribute of input[type="submit]" or button[type="submit"].

From MDN:

...this attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a browsing context (for example, tab, window, or inline frame). If this attribute is specified, it overrides the target attribute of the elements's form owner. The following keywords have special meanings:

_self: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.

_blank: Load the response into a new unnamed browsing context.

_parent: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.

_top: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.

Looks like they removed that content from the input element page. Similar info about the formtarget attribute can be found on the button element page: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formtarget — peater, Sep 19 '19 at 14:40

score 9 · Answer 4 · answered May 22 '09 at 14:37

onclick may not be the best event to attach that action to. Anytime anyone clicks anywhere in the form, it will open the window.

<form action="..." ...
    onsubmit="window.open('google.html', '_blank', 'scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');return true;">

score 4 · Answer 5 · edited May 08 '12 at 17:27

4

The code you have given, needs to be corrected. In form tag you have to enclosed the onClick attribute value in double quote:

"window.open('google.htm','','scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');"

You also need to take care that first parameter of window.open should also be enclosed using quotes.

edited May 08 '12 at 17:27

FLY

2,379
5
29
40

answered May 22 '09 at 07:43

Sourabh

1,515
1
14
21

score 2 · Answer 6 · answered Nov 27 '14 at 16:20

I generally use a small jQuery snippet globally to open any external links in a new tab / window. I've added the selector for a form for my own site and it works fine so far:

// URL target
    $('a[href*="//"]:not([href*="'+ location.hostname +'"]),form[action*="//"]:not([href*="'+ location.hostname +'"]').attr('target','_blank');

score 0 · Answer 7 · answered May 17 '23 at 20:56

Thumbs up to @Awerealis for an authentic, php popup window solution.

But after getting the popup window and using it to insert data into my database, I ran into the further problem of having the results page of the db entry fill up the popup window. I wanted the popup window to go away and have the original (parent) page refresh with the new data.

I achieved that with the following:

On the parent page (from which the popup window is issued), I added this code to the <head> element:

<script>
    window.onunload = refreshParent;
    function refreshParent() {
        window.opener.location.reload();
        window.close();
    }
</script>

At the end of the popup (child) window, I added:

<script type="text/javascript">
  window.close();
</script>

Upon returning to the parent page, the new data is displayed giving altogether the feeling of an ajax call from the popup window which is what I was looking for.

Hope this helps someone.

score -2 · Answer 8 · answered Aug 28 '19 at 07:10

i believe this jquery work for you well please check a code below.

this will make your submit action works and open a link in new tab whether you want to open action url again or a new link

jQuery('form').on('submit',function(e){
setTimeout(function () { window.open('https://www.google.com','_blank');}, 1000);});})

This code works for me perfect..

score -4 · Answer 9 · edited Sep 23 '14 at 08:12

-4

window.open doesn't work across all browsers, Google it and you will find a way of detecting the correct dialog type.

Also, move the onclick call to the input button for it to only fire when the user submits.

edited Sep 23 '14 at 08:12

Ajinkya

22,324
33
110
161

answered May 22 '09 at 07:34

cjk

45,739
9
81
112

1

onclick on the input button is wrong. Then, if the user clicks it, but moves away before releasing, it will still fire. – Matthew Flaschen May 22 '09 at 07:51

How to open a new window on form submit

9 Answers9

Linked