title: How to display a table inside a modal popup window which is part of a larger form
body: <p>I have some code below that contains a form which contains a <code>hiddenTable</code> element that will show up once you click the <code>search</code> button. My question is: how would I display the table in a modal popup window while still having it be apart of the same form. The table contains a comment box and a submit button, I want the comment to be submitted along with all the other field's data inside the form.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;style&gt;
      #hiddenStuff {
          display: none;
      }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;form action="..."&gt;
      // search fields here
      &lt;input type="button" 
  value="Search" 
  onclick="document.getElementById('hiddenTable').style.display='block';"&gt;
  
    &lt;table id="hiddenTable" class="form_table" style="display:none;"&gt;
      &lt;tr&gt;
        &lt;td class="form_field_name"&gt;Enter a comment&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
        &lt;td class="form_field_entry"&gt;
          &lt;textarea required ="true" 
  name="textarea" rows="10" 
  cols="50" 
  placeholder="Please enter a description for the performed task."&gt;&lt;/textarea&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td class="form_field_entry"&gt;
          &lt;cfinput type="submit" name="createPeriod" value="Submit"/&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
     &lt;/table&gt;
  &lt;/form&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Please excuse my messy code. </p>