title: PHP Ajax Call Navigating to Action Page on Form Submit
body: <p>I have this ajax call in my php code that still navigates to action page. I want the ajax call to stay on the same page and only update part of the page. What I'm doing wrong here:</p>
  
  <pre><code>&lt;form method="post" id="holderSave" action="student_add_scene.php"&gt;
              &lt;h3&gt; Save to Holder&lt;/h3&gt;&lt;br/&gt;
              &lt;div id="cutfrom"&gt;
                  &lt;input placeholder="Cut from" name="from" id="from"&gt;
                  &lt;button href="#" onclick="captureElapsed('elapseFrom', 'from');
                          return false;"&gt;capture&lt;/button&gt;
              &lt;/div&gt;
  
              &lt;div id="cutto"&gt;  
                  &lt;input placeholder="Cut to" name="to" id="to" &gt;
                  &lt;button href="#" onclick="captureElapsed('elapseTo', 'to');
                          return false"&gt;capture&lt;/button&gt;
              &lt;/div&gt;
  
              &lt;div id="savecapt"&gt;
                  &lt;input placeholder="add label" id="label" name="label"/&gt;
                  &lt;input type='submit' value='Save' class='button'&gt;
              &lt;/div&gt;
          &lt;/form&gt;
  
  
  
  
  &lt;script&gt;
          $('#holderSave').on("submit", (function (e) { // catch the form's submit event
              e.preventDefault();
              $.ajax({// create an AJAX call...
              var $form = $(this), url = $form.attr('action');
              var posting = $.post( url, { from: $('#from').val(), label:$('#label').val(), to: $('#to').val()});
              posting.done(function(response)){
                  $('#holderSave').html(response); // update the DIV
                  alert(response);
              }
  
          });
          return false;
          }));
      &lt;/script&gt;
  </code></pre>