title: Make Ajax and PHP update page without page refresh?
body: <p>Whenever I submit the "Add Bill" form, nothing happens until I refresh the page. That's when I see my new item in the Twig loop. The same problem happens when I click on the Remove link. Nothing is removed (visually) until I refresh the page. </p>
  
  <p>How do I make this stuff happen right away on the page without a page refresh? I'm thinking it might have something to do with my PHP or SQL?</p>
  
  <p>JavaScript:</p>
  
  <pre><code>$(document).ready(function() {
      $(".addBill").on("click", function() {
          var billAmount = $('.billAmount').val();
          var billName = $('.billName').val();
          $.ajax({
              type: "POST",
              url: "index.php",
              data: { 
                  bill_amount: billAmount, 
                  bill_name: billName,
                  action: 'addBill'
              }
          });
          return false;
      });
  
      $(".removeBill").on("click", function() {
          var id = $(this).data('id');
          $.ajax({
              type: "POST",
              url: "index.php",
              data: { 
                  id_to_delete: id, 
                  action: 'removeBill' 
              }
          });
          return false;
      });
  });
  </code></pre>
  
  <p>HTML: </p>
  
  <pre><code>&lt;form method="post" name="addBillForm"&gt;
      &lt;input type="text" placeholder="Enter bill name" name="billName" class="billName"&gt;
      &lt;input type="text" placeholder="Enter bill amount" name="billAmount" class="billAmount"&gt;
      &lt;input type="submit" value="Submit" name="addBillForm" class="addBill"&gt;
  &lt;/form&gt;
  
  &lt;br&gt;&lt;br&gt;
  &lt;h2&gt;My Bills&lt;/h2&gt;
  {% for bill in bills %}
      &lt;p&gt;{{ bill.billName }} - {{ bill.billAmount }} - 
          &lt;a href="#" class="removeBill" data-id="{{ bill.id }}"&gt;Remove&lt;/a&gt;
      &lt;/p&gt;
  {% endfor %}
  </code></pre>
  
  <p>Here is my PHP file:</p>
  
  <pre><code>&lt;?php
  
  require_once 'global.php';
  
  if (@$_POST['action'] == 'addBill')
  {
      $billName = $_POST['bill_name'];
      $billAmount = intval($_POST['bill_amount']);
      $stmt = $db-&gt;prepare("INSERT INTO bills (billName, billAmount) VALUES(?,?)");
      $stmt-&gt;bindParam(1, $billName);
      $stmt-&gt;bindParam(2, $billAmount);
      $stmt-&gt;execute();
  }
  
  if (@$_POST['action'] == 'removeBill')
  {
      $id = intval($_POST['id_to_delete']);
      $stmt = $db-&gt;prepare("DELETE FROM bills WHERE id = ?");
      $stmt-&gt;bindValue(1, $id);  
      $stmt-&gt;execute();
  }
  
  $billResults = $db-&gt;query('SELECT * FROM bills');
  $bills = $billResults-&gt;fetchAll(PDO::FETCH_ASSOC);
  
  $twigContext = array(
      "bills" =&gt; $bills
  );
  
  echo $twig-&gt;render('base.html.twig', $twigContext);
  </code></pre>