title: Form submit to Textarea on submit
body: <p>I am attempting to create a form that outputs the entered data when "submit" is clicked to a textarea.</p>
  
  <p>Currently I can get it to submit to the area below the form but am unsure how to have multiple ID's in a single textarea.</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-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
      &lt;script&gt;
      function showInput() {
          document.getElementById('display').innerHTML = 
                      document.getElementById("user_input").value;
          document.getElementById('name').innerHTML = 
                      document.getElementById("user_name").value;
          document.getElementById('stepsTaken').innerHTML = 
                      document.getElementById("user_stepsTaken").value.replace(/(?:\r\n|\r|\n)/g, '&lt;br /&gt;');
          document.getElementById('theDate').innerHTML = 
                      document.getElementById("user_theDate").value.replace(/(?:\r\n|\r|\n)/g, '&lt;br /&gt;');
      }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
   &lt;script type="text/javaScript"&gt;
   function Qreplace(e) {
      var textfield = document.getElementById(e);
      var regex = /#test/gi;
      textfield.value = textfield.value.replace(regex, "1. test\n2. test");
      var regex = /#report/gi;
      textfield.value = textfield.value.replace(regex, "1. report\n2. report");
      }
   &lt;/script&gt;
  
   &lt;form action="javascript:void(0);"&gt;
  &lt;p&gt;
      &lt;label&gt;&lt;b&gt;Enter a Message&lt;/b&gt;&lt;/label&gt;&lt;p&gt;
      &lt;input type="text" id="user_input" required&gt;&lt;p&gt;
      &lt;label&gt;&lt;b&gt;Enter a name&lt;/b&gt;&lt;/label&gt;&lt;p&gt;
      &lt;input type="text" id="user_name" required&gt;&lt;p&gt;
      &lt;textarea id="user_stepsTaken" onkeyup="Qreplace('user_stepsTaken')" placeholder="Actions taken and notes..." style="height: 91px; max-height: 350px;" required&gt;&lt;/textarea&gt;
            &lt;label for="sme"&gt;TL/SME Assist*&lt;/label&gt;
  
          &lt;br&gt;
      
      Yes &lt;input required="" type="radio" onclick="javascript:smeCheck();" value="Yes" name="TL/SME" id="yesCheck"&gt; 
      No &lt;input type="radio" onclick="javascript:smeCheck();" value="No" name="TL/SME" id="noCheck"&gt;&lt;br&gt;
      &lt;div id="ifyes" style="display:none"&gt;
  
          &lt;input type="text" id="smeAssist" name="smeAssist" placeholder="Name or Initials of the TL/SME that provided assistance"&gt;
              &lt;!-- Hide/Show SME additonal options based on radio check box --&gt;
              &lt;script type="text/javascript"&gt;
                  function smeCheck() {
                    if (document.getElementById('yesCheck').checked) {
                      document.getElementById('ifyes').style.display = 'block';
                    } else document.getElementById('ifyes').style.display = 'none';
                
                  } 
              &lt;/script&gt;
      &lt;/div&gt;
      &lt;div style="display:block; margin-left: 0px;"&gt;
        &lt;label for="dateStarted"&gt;Issue Started*&lt;/label&gt;
        &lt;input type="date" id="user_theDate" name="theDate" class="select"&gt;
      &lt;/div&gt;
      &lt;input type="submit" onclick="showInput();"&gt;&lt;br/&gt;
   &lt;/form&gt;
  
  
   &lt;label&gt;Your input: &lt;/label&gt;
   &lt;p&gt;&lt;span id='display'&gt;&lt;/span&gt;&lt;/p&gt;
   &lt;p&gt;&lt;span id='name'&gt;&lt;/span&gt;&lt;/p&gt;
   &lt;div id='stepsTaken'&gt;&lt;/div&gt;
   &lt;div id='theDate'&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you for any help I am quite unfamiliar with Javascript.</p>
  
  <p>So the end result I am trying to accomplish is have the user input to output into a textarea with the following formatting below.</p>
  
  <hr>
  
  <p>Message: Message here</p>
  
  <p>Name: Name here</p>
  
  <p>Info: Actions Taken</p>
  
  <p>Date: 2018-12-13</p>