title: Displaying a 'hidden' form once the first form is filled and submit button clicked
body: <p>i have two html forms where the second form has been set to 'display: none;' and therefore does not display when i load the page(only the first form loads)</p>
  
  <p>the idea is once the first form has been filled in and its button clicked, to display the second form which after being displayed will be filled in and submitted to a 'thankyou page'</p>
  
  <p>Here is the first form that displays once the page is loaded:</p>
  
  <pre><code>&lt;form id = "form1" &gt;
      &lt;table class = "tbl"&gt;
      &lt;tr&gt;
      &lt;td&gt; Title * &lt;/td&gt;&lt;/tr&gt; 
      &lt;tr&gt;&lt;td&gt; &lt;input type = "text" name = "title" class = "title" required&gt; &lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;
      &lt;td&gt; First name * &lt;/td&gt;&lt;/tr&gt; 
      &lt;tr&gt;&lt;td&gt; &lt;input type = "text" name = "fname" class = "fname" required&gt; &lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;
      &lt;button id = "btn" onClick="document.getElementById('form2').style.display='';"&gt;&lt;img src = "images/Next.png" /&gt;&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;  
  
      &lt;/table&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>and here is the second form that should be displayed once the first has been successfully filled in and the submit button clicked(i have validated the first form with the 'required' attribute)..</p>
  
  <pre><code>&lt;form id = "form2" method = "post" action = "thankyou_page.php"&gt;
      &lt;table class = "tbl2"&gt;
      &lt;tr&gt;
      &lt;td&gt; Email * &lt;/td&gt;&lt;/tr&gt; 
      &lt;tr&gt;&lt;td&gt; &lt;input type = "text" name = "email" class = "email" required&gt; &lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;
      &lt;td&gt; Telephone * &lt;/td&gt;&lt;/tr&gt; 
      &lt;tr&gt;&lt;td&gt; &lt;input type = "text" name = "phone" class = "phone" required&gt; &lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;   &lt;button id = "btn1"&gt;&lt;img src = "images/Get_decorating_quotes.png" /&gt;&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt; 
  </code></pre>
  
  <p>i have then used an external css file for my styling..here's how i've done for 'form2'</p>
  
  <pre><code>#form2
  {
      display: none;
  }
  </code></pre>
  
  <p>what i get so far after loading my page is that once i hit the button on the first form('form1'), 'form2' is displayed THEN the validation message 'Please fill this field' displays..my wish is first for the form1 to validate the form and once ALL fields are filled, display 'form2'(using the onClick function passed to 'btn') while still having the content of 'form1' in the form as i fill in and submit 'form2'..</p>
  
  <p>any help would be appreciated.</p>