title: jQuery AJAX: Don't Reload Page when Submitted
body: <p>How can I stop the webpage from reloading when this jQuery AJAX executes? I thought         e.preventDefault(); was supposed to stop this, but it doesn't.</p>
  
  <pre><code>if (isset($_POST['delete-image'])) {
      try {
          $sql = 'UPDATE image SET filename = NULL, mime_type = NULL WHERE title_id = :id; ';
          $s = $pdo - &gt; prepare($sql);
          $s - &gt; bindValue(':id', $_POST['id']);
          $s - &gt; execute();
          if (file_exists($image_dir_php.$_POST['filename'])) {
              unlink($image_dir_php.$_POST['filename']);
          }
      } catch (PDOException $e) {
          $error = 'Error deleting the image!';
          include $_SERVER['DOCUMENT_ROOT'].
          '/admin/inc/error.html.php';
          exit();
      }
      header('Location: .');
      exit();
  }
  </code></pre>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code>$( "#delete-image" ).click(function(e) {
      e.preventDefault();
      $form = $(this).parent('form');
      $btnid = $(this).attr('name');
      $btnval = $(this).attr('value');
  
      $.ajax({
          url: $form.attr('action'),
          type: $form.attr('method'),
          data: { "btnid" : $btnid, "btnval": $btnval, "form-data": $form.serialize() },
          success: function(html) {
              console.log(html);
          }
      });
  });
  </code></pre>