title: Trying to create a new window with the information from a form that I can customize. Stuck
body: <p>I am working on a website for a friend of a friend, and the biggest thing I am stuck on currently is the adoption form. I have the form all said an done, but I cannot get the input information to open on a new page. A print screen so to speak that only includes the questions and the inputted answers. I had a very simple code which worked out fine. It popped up with exactly what I wanted printed. Problem is that I could not customize it with CSS. I found another way of doing it from a help question on here. But this person who asked the question isn't doing the same thing I am so it only helps so much.</p>
  
  <p>This is the code I tried that worked fine but wasn't customizable:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script type="text/javascript"&gt;
  
  function printDiv(divName) {
   alert('s');
   var printContents = document.getElementById(divName).innerHTML;
   w=window.open();
   w.document.write(printContents);
   w.print();
   w.close();
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>For specific area of a page
  &lt;div id="print-content"&gt;
   &lt;form&gt;
  
    &lt;input type="button" onclick="printDiv('print-content')" value="print a div!"/&gt;
  &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is another code I also tried, which didn't work at all:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function printPage(){
          var width = screen.width - 50;
          var tableData = '&lt;table width="'+width+'" border="1"&gt;'+document.getElementsByTagName('table')[0].innerHTML+'&lt;/table&gt;';
  
          var cssHead = '&lt;head&gt;&lt;link rel="stylesheet" type="text/css" href="mystyle.css"&gt;&lt;/head&gt;'
  
          var data = cssHead + '&lt;button onclick="window.print()"&gt;Print this page&lt;/button&gt;'+tableData;     
          myWindow=window.open('','','width=auto,height=auto');
          myWindow.innerWidth = screen.width;
          myWindow.innerHeight = screen.height;
          myWindow.screenX = 0;
          myWindow.screenY = 0;
          myWindow.document.write(data);
          myWindow.focus();
      };</code></pre>
  </div>
  </div>
  </p>
  
  <p>Nothing happened after this. I clicked the button and absolutely nothing happened.</p>
  
  <p>Then I tried taking a little bit of both:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function printDiv(divName) {
  
  
  var printContents = document.getElementById(divName).innerHTML;
  var cssHead = '&lt;head&gt;&lt;link rel="stylesheet" type="text/css" href="mystyle.css"&gt;&lt;/head&gt;'
  
  
  var data = cssHead + printContents;
  
   myWindow=window.open('','','width=auto,height=auto');
          myWindow.innerWidth = screen.width;
          myWindow.innerHeight = screen.height;
          myWindow.screenX = 0;
          myWindow.screenY = 0;
          myWindow.document.write(data);
          myWindow.focus();
   myWIndow.close();
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>This also did not work. Clicked the button nothing happened. I am at a horrible loss for what to do. I know some JavaScript but not a lot. I was exposed to it a bit in school. Nothing advanced. I really want to get this done and it is one of the last things before it's finished. Any ideas? What am I doing wrong?</p>