title: How to get AJAX to execute PHP method on blur?
body: <p>I want to be able to run a method that adds the title and amount to the table that is on the <code>index.php</code> page. I have defined the method <code>addItem()</code> in the <code>database_class.php</code>. I currently have this working with pure PHP when you click the <code>add</code> button but want AJAX to run this code on blur of the <code>amount</code> textbox. What am I doing wrong?</p>
  
  <p>Success and Complete are coming up on the console log atm. However I have printed the data variable out on the .done function and shows that it is hitting the else statement on the add.php file so it also logs out "Erorr occurred on add.php"</p>
  
  <p><strong>CODE:</strong></p>
  
  <p><strong>index.php:</strong></p>
  
  <pre><code>&lt;?php 
  
  require("class/database_class.php");
  
  $db = new Database();
  $data = $db-&gt;getAllData();
  
   ?&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Testing&lt;/title&gt;
      &lt;script src="bower_components/jquery/dist/jquery.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-6 col-md-offset-3"&gt;
                  &lt;form action="add.php" method="POST"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label for="item"&gt;Item:&lt;/label&gt;
                          &lt;input type="text" name="item" class="form-control"&gt;
                      &lt;/div&gt;
                      &lt;label for="amount"&gt;Amount:&lt;/label&gt;
                      &lt;div class="input-group input-group-sm"&gt;
                          &lt;div class="input-group-addon" id="sizing-addon3"&gt;$&lt;/div&gt;
                          &lt;input type="text" class="form-control amount" name="amount"&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;input type="submit" class="btn btn-block btn-success add" value="Add"&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-6 col-md-offset-3"&gt;
                  &lt;table class="table table-striped"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;Item&lt;/th&gt;
                              &lt;th&gt;Amount&lt;/th&gt;
                              &lt;th&gt;Paid&lt;/th&gt;
                              &lt;th&gt;Remove&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                          &lt;?php foreach ($data as $item): ?&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;&lt;? echo $item['item']; ?&gt;&lt;/td&gt;
                                  &lt;td&gt;$&lt;? echo $item['amount']; ?&gt;&lt;/td&gt;
                                  &lt;td&gt;&lt;a href="#"&gt;Paid&lt;/a&gt;&lt;/td&gt;
                                  &lt;td&gt;&lt;a href="&lt;? echo 'delete.php?id=' . $item['id']; ?&gt;"&gt;Remove&lt;/a&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;?php endforeach ?&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script src="js/app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>add.php</strong></p>
  
  <pre><code>&lt;?php 
  
  require("class/database_class.php");
  
  $db = new Database();
  print_r($_POST);
  if (isset($_POST) &amp;&amp; sizeof($_POST) &gt; 0) {
      $db-&gt;addItem($_POST); // Need to get AJAX to run this method as it is hitting the else statement atm...
  } else {
      echo 'Erorr occurred on add.php'.'&lt;br&gt;';
  
  }
  </code></pre>
  
  <p>?></p>
  
  <p><strong>database_class.php</strong></p>
  
  <pre><code>&lt;?php 
  
  class Database
  {
      public $pdo;
      public $db_name;
      public $host;
      public $db_user;
      public $db_pass;
      public $formItem;
      public $formAmount;
  
  
      function __construct()
      {
          $this-&gt;connect();
      }
  
      public function connect()
      {
          $this-&gt;host = '127.0.0.1';
          $this-&gt;db_name = 'moneytrack';
          $this-&gt;db_user = 'root';
          $this-&gt;db_pass = 'root';
  
          try {
              $this-&gt;pdo = new PDO("mysql:host=$this-&gt;host;dbname=$this-&gt;db_name", $this-&gt;db_user, $this-&gt;db_pass);
              echo "Connected to DB successfully";
          } catch (Exception $e) {
              echo $e;
          }
      }
  
      public function getAllData()
      {
          $q = $this-&gt;pdo-&gt;prepare("SELECT * FROM items");
          $q-&gt;execute();
          return $q-&gt;fetchAll();
      }
  
      public function addItem($data)
      {
          $item = $this-&gt;formItem = $data['item'];
          if (!empty($item)) {
              $amount = $this-&gt;formAmount = $data['amount'];
              $q = $this-&gt;pdo-&gt;prepare("INSERT INTO items(item, amount) VALUES(:item, :amount)");
              $data = [
                  ':item' =&gt; $data['item'],
                  ':amount' =&gt; $data['amount']
              ];
              $q-&gt;execute($data);
              $_POST = [];
              unset($_POST);
              header("Location: index.php");
              exit;
          } else {
              echo 'Fields are empty';
          }
  
      }
  
      public function deleteItem($id)
      {
          $q = $this-&gt;pdo-&gt;prepare("DELETE FROM items WHERE id = :id");
  
          $data = [
              ':id' =&gt; $id,
          ];
          return $q-&gt;execute($data);
      }
  }
  
   ?&gt;
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>$(document).ready(function() {
      console.log('jquery is working');
          $('.amount').blur(function(event) {
              console.log('Bluring');
              $.ajax({
                  url: 'add.php',
                  type: 'POST',
              })
              .done(function(data) {
                  console.log("success " + data);
              })
              .fail(function() {
                  console.log("error");
              })
              .always(function() {
                  console.log("complete");
              });
  
          });
  });
  </code></pre>