title: Output data from form on same page with custom BBCode
body: <p>I'm trying to output data from a form on the same page using javascript. I already got it to work. But I want to add something else that I can't get to work.</p>
  
  <p>As you can see in the snippet below when you press submit, the data gets outputted on the same page from the input. Now I'm trying to add custom BBCode to that so my staff can post the output on the forums. (It's an interview logger).</p>
  
  <p>Example: [b][/b] should be outputted on some fields, ....
  I tried adding this bbcode in the javascript or the output span, but that broke the whole script.</p>
  
  <p>I also had another question. If I add a dropdown or radiobutton with Pass or Fail. How would I made the output change. (Example: If Pass: [Color = Green] User has passed the interview [/color], If fail: [Color = Red] User hase failed the interview. Reason: ... [/color]</p>
  
  <p>Thanks in advance.</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;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head lang="en"&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;script language="JavaScript"&gt;
      function showInput() {
          document.getElementById('display').innerHTML = 
                      document.getElementById("user_input").value;
      }
    &lt;/script&gt;
  
    &lt;/head&gt;
  &lt;body&gt;
  
    &lt;form&gt;
      &lt;label&gt;&lt;b&gt;Enter a Message&lt;/b&gt;&lt;/label&gt;
      &lt;input type="text" name="message" id="user_input"&gt;
    &lt;/form&gt;
  
    &lt;input type="submit" onclick="showInput();"&gt;&lt;br/&gt;
    &lt;label&gt;Your input: &lt;/label&gt;
    &lt;p&gt;&lt;span id='display'&gt;&lt;/span&gt;&lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>