title: AJAX Submit to PHP still loading page after preventDefault()
body: <p>I have a webpage that I am using .ajax to send variables to a php script. The php page is loading into the browser as if I was navigating to it. The script is loading the data correctly, so my issue is stopping the navigation and keeping the user on the original page. The code for my form is here:</p>
  
  <pre><code>echo "&lt;form method='post' action='addTask.php' id='myform'&gt;\n";
  echo "&lt;input name='addtask' id='addtask' maxlength='64'/&gt;&lt;br/&gt;\n";
  echo "&lt;input type='submit' name='submit' id='submit' value='Add Task'/&gt;\n";
  echo "&lt;/form&gt;\n";
  </code></pre>
  
  <p>The code for my jquery is here:</p>
  
  <pre><code>    $(function(){
      $('#myform').submit(function(e){
          e.stopPropagation();
          $.ajax({
              url: 'addTask.php',
              type: 'POST',
              data: {},
              success: alert("Success")
              });
          });
      });
  </code></pre>
  
  <p>I have tried: e.preventDefault(), e.stopPropagation() and return false. Any help is appreciated.</p>
  
  <pre><code>        $("#submit").click(function(e){
          e.preventDefault();
          $.ajax({
              type: "POST",
              url: "addtask.php",
              data: { }
          })
          .done(function() {
              alert( "success" );
          })
          .fail(function() {
              alert( "error" );
          });
  </code></pre>
  
  <p>and</p>
  
  <pre><code>$(function(){
      $('#myform').submit(function(e){
          e.preventDefault();
          $.ajax({
              url: 'addTask.php',
              type: 'POST',
              data: {},
              success: function(){alert("Success")}
          });
      });
  });
  </code></pre>