title: When I type in my div it tries to submit form
body: <p>I have some JavaScript / jQuery. When I type inside my div it displays the code as I am typing in preview area below the bootstrap panel.</p>
  
  <p>But because I have form tags wrapped around it and then go and start typing for some reason it triggers the form to submit which I do not need.</p>
  
  <p>I would only like to be able to submit form when click on the submit button.</p>
  
  <p>How to stop the form from being submitted when I start typing in the editable div area? And only submit the form when click on submit button instead.</p>
  
  <p>Code View Previews:</p>
  
  <p><a href="http://codepen.io/riwakawebsitedesigns/pen/PZpxNR" rel="nofollow">Codepen Code View</a></p>
  
  <p><a href="http://codepen.io/riwakawebsitedesigns/full/PZpxNR/" rel="nofollow">Codepen Full View</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;form action="index.php" method="post" class="form-horizontal"&gt;
  &lt;div class="container"&gt;
  
  &lt;div class="row"&gt;
  &lt;div class="col-lg-12 col-md-12 col-sm-12 col-sm-12"&gt;
  
  &lt;div class="form-group"&gt;
      &lt;label for="forum-title" class="col-sm-2"&gt;Title&lt;/label&gt;
          &lt;div class="col-sm-10"&gt;
          &lt;input type="text" class="form-control" name="title" id="forum-title" placeholder="Title" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
  &lt;div class="col-lg-12 col-md-12 col-sm-12 col-sm-12"&gt;
  &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;
          &lt;div class="clearfix"&gt;
              &lt;div class="pull-left"&gt;
                  &lt;button id="bold" class="btn btn-default" data-toggle="tooltip" data-placement="top" href="#" title="Bold &lt;b&gt;"&gt;&lt;i class="fa fa-bold"&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;button id="italic" class="btn btn-default" data-toggle="tooltip" data-placement="top" href="#" title="Ilatic &lt;i&gt;"&gt;&lt;i class="fa fa-italic"&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;button id="pre" class="btn btn-default" data-toggle="tooltip" data-placement="top" href="#" title="Code Sample &lt;pre&gt;"&gt;{}&lt;/button&gt;
                  &lt;button id="hr" class="btn btn-default" data-placement="top" href="#" title="Still Working On Script" disabled="disabled"&gt;hr&lt;/button&gt;
                  &lt;button id="hyperlink" class="btn btn-default" data-placement="top" href="#" title="Still Working On Script" disabled="disabled"&gt;&lt;i class="fa fa-link icon-link"&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;button id="strikethrough" class="btn btn-default" data-placement="top" href="#" title="Still Working On Script" disabled="disabled"&gt;&lt;i class="fa fa-strikethrough icon-strikethrough"&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;button id="code_view" class="btn btn-default" data-toggle="tooltip" data-placement="top" href="#" title="Code View"&gt;&lt;i class="fa fa-code icon-code"&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;button id="revert" class="btn btn-default" data-placement="top" href="#" title="Still Working On Script" disabled="disabled" disabled="disabled"&gt;Revert&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="pull-right"&gt;
              &lt;/div&gt;
          &lt;/div&gt; 
      &lt;/div&gt;
      &lt;div class="panel-body"&gt;
          &lt;div class="form-group"&gt;
              &lt;div id="editable"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;&lt;!-- .panel-body --&gt;
      &lt;div class="panel-footer"&gt;
          &lt;div class="clearfix"&gt;
          &lt;div class="pull-left"&gt;
          &lt;/div&gt;
          &lt;div class="pull-right"&gt;
              &lt;button type="submit" class="btn btn-primary"&gt;Post Your Question&lt;/button&gt;
          &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;&lt;!-- .panel --&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
      &lt;div class="col-lg-12 col-md-12 col-sm-12 col-sm-12"&gt;
          &lt;div id="preview"&gt;&lt;/div&gt;
      &lt;/div&gt;  
  &lt;/div&gt;
  
  &lt;/div&gt;&lt;!-- .container --&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>Script</strong></p>
  
  <pre><code>$(function(){
     $("#bold").tooltip();
     $("#italic").tooltip();
     $("#hr").tooltip();
     $("#hyperlink").tooltip();
     $("#strikethrough").tooltip();
     $("#pre").tooltip();
     $("#code_view").tooltip();
     $("#revert").tooltip();
  });
  
  $('#code_view').on('click', function() {
      var code = $('#editable').text();
      $('#preview').html(code);
  });
  
  $('#editable').keyup(function(){
      $('#code_view').trigger('click');
  });
  
  $('#editable').each(function(){
      this.contentEditable = true;
  });
  
  $(document).ready(function() {
      $("button[id='bold']").on('click', function() {
          var text, sel, range;
  
          if (window.getSelection) {
  
              text = window.getSelection().toString();
              sel = window.getSelection();
  
              if (sel.rangeCount) {
                  range = sel.getRangeAt(0);
                  range.deleteContents();
                  range.insertNode(range.createContextualFragment('&lt;b&gt;'+text+'&lt;/b&gt;'));
              }
  
          } else if (document.selection &amp;&amp; document.selection.createRange) {
  
              text = document.selection.createRange().text;
              range = document.selection.createRange();
              range.innerHTML = '&lt;b&gt;'+text+'&lt;/b&gt;';
          }   
      $('#code_view').trigger('click');
      });
  
  
      $("button[id='italic']").on('click', function() {      
          var text, sel, range;
  
          if (window.getSelection) {
  
              text = window.getSelection().toString();
              sel = window.getSelection();
  
              if (sel.rangeCount) {
                  range = sel.getRangeAt(0);
                  range.deleteContents();
                  range.insertNode(range.createContextualFragment('&lt;i&gt;'+text+'&lt;/i&gt;'));
              }
  
          } else if (document.selection &amp;&amp; document.selection.createRange) {
  
              text = document.selection.createRange().text;
              range = document.selection.createRange();
              range.innerHTML = '&lt;i&gt;'+text+'&lt;/i&gt;';
          }   
  
          $('#code_view').trigger('click');
  
      });
  
      $("button[id='hr']").on('click', function() {
          $('#code_view').trigger('click');
      });
  
  
      $("button[id='pre']").on('click', function() {           
          var text, sel, range;
  
          if (window.getSelection) {
  
              text = window.getSelection().toString();
              sel = window.getSelection();
  
              if (sel.rangeCount) {
                  range = sel.getRangeAt(0);
                  range.deleteContents();
                  range.insertNode(range.createContextualFragment('&lt;pre&gt;'+text+'&lt;/pre&gt;'));
                  $("pre").before("&lt;br /&gt;&lt;br /&gt;");
                  $("pre").after("&lt;br /&gt;&lt;br /&gt;");
              }
  
          } else if (document.selection &amp;&amp; document.selection.createRange) {
  
              text = document.selection.createRange().text;
              range = document.selection.createRange();
              range.innerHTML = '&lt;pre&gt;'+text+'&lt;/pre&gt;';
  
              $("pre").before("&lt;br /&gt;&lt;br /&gt;");
              $("pre").after("&lt;br /&gt;&lt;br /&gt;");
  
          }   
  
          $('#code_view').trigger('click');
  
      });
  
  
      $("button[id='revert']").on('click', function() {           
          var text, sel, range;
  
          if (window.getSelection) {
  
              text = window.getSelection().toString();
              sel = window.getSelection();
  
              if (sel.rangeCount) {
                  range = sel.getRangeAt(0);
                  range.deleteContents();
                  range.insertNode(range.createContextualFragment(text));
              }
  
          } else if (document.selection &amp;&amp; document.selection.createRange) {
  
              text = document.selection.createRange().text;
              range = document.selection.createRange();
              range.innerHTML = text;
          }
  
          $('#code_view').trigger('click');
      });
  
  });
  </code></pre>