 <p>There are somethings that can help a lot here. First opening a second window can be a painful experience both for the user and the programmer. Unless you have an absolute need I would recommend manipulating the current window's DOM to display a popup instead.</p> <p>Next if you can use DOM methods to change the page contents. <code>document.write</code> comes with a lot of problems which in your case are not apparent. Mainly it can erase you current DOM. You don't notice this in your example because the new window is blank so rewriting it is incidental.</p> <p>Finally your use of <code>allInfo</code> is a quirky way to reference a global variable. It is not easily understood that this is happening from the style of code. In fact any linter will throw an error for your use of the global and will case an error if you declare <code>"use strict"</code> in your functions. Best to learn the good coding practises way.</p> <p>Since we will want to interact with a variable (<code>allInfo</code>) in your case we should encapsulate the value in an object. This object can hold the state of that reference and offer some abstracted interactions with it. By doing so you avoid polluting the global name space and allow you to swap out your implementation without having to rewrite the parts of your program that depend on it.</p> <pre><code>// Our welcome window object function WelcomeWindow() { // save a reference to the content of your new window // to be printed when ready. (Lazy execution) this.innerHTML = ''; } WelcomeWindow.prototype.open = function() { this.win = window.open("", "displayWindow"); return this; }; WelcomeWindow.prototype.close = function() { this.win.close(); return this; }; WelcomeWindow.prototype.write = function(html) { this.innerHTML += '' + html; return this; }; WelcomeWindow.prototype.render = function() { if (!this.win) { throw new Error("window has not been opened yet."); } this.win.open(); this.win.write('&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;link rel="stylesheet" type="text/css" href="mystyle_invite.css"&gt;&lt;title&gt;Resume&lt;/title&gt;&lt;meta charset="utf-8"&gt; &lt;/head&gt;&lt;body&gt;'); this.win.write(this.innerHTML); this.win.write('&lt;/body&gt;&lt;/html&gt;'); this.win.close(); return this; }; </code></pre> <p>This allows us to declaratively manipulate the window before it is opened. For example if we want to add the name to the window:</p> <pre><code>function NameField(id) { this.element = document.getElementById(id); } NameField.prototype.toString = function() { var name = this.element.value; switch (name) { case 'Michael': return 'Mr. Michael'; case 'Sam': return 'Mrs. Sam'; default: return 'Sir ' + name; } }; NameField.prototype.toHtml = function() { return '&lt;strong&gt;' + this.toString() + '&lt;/strong&gt;'; }; </code></pre> <p>Linking it together using code instead because adding events into the DOM only confuses the separation of markup and code.</p> <pre><code>window.onload = function() { var form = document.getElementById('infoForm'); form.onsubmit = function(e) { e.preventDefault(); var name = new NameField('firstName'); new WelcomWindow() .write(name.toHtml()) .open() .render(); return false; }; }; </code></pre>