Untitled

<!DOCTYPE HTML>

<?php
$servername = "localhost";
$username = "root";
$password = "root";
$database = "lamp2proj1";

    // Create connection
$connection = new mysqli($servername, $username, $password, $database);

if ($connection->connect_error)
{
  die("Connection failed: " . $connection->connect_error);
}

$tasks = $connection->query('SELECT * FROM task');
?>

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Project 1</title>
  </head>
  <body>
    <h1>My task list</h1>
    <h2>Tasks to display</h2>
    <form>
      <input type="radio" name="tasksDisplay" value="incomplete" checked> Show incomplete only<br>
      <input type="radio" name="tasksDisplay" value="all"> Show all<br>
    </form>
    <h2>Sort Order</h2>
    <form>
      <input type="radio" name="sortOrder" value="dateCreated" checked> Sort by date created<br>
      <input type="radio" name="sortOrder" value="priority"> Sort by priority<br><br>
    </form>
    <!--<h3>Description</h3>
    <h3>Priority</h3>
    <h3>Date Created</h3>
    <h3>Date Completed</h3>
    <button type="buttonComplete">Complete selected</button>
    <button type="buttonDelete">Delete selected</button>-->
    <table style='border:1px solid black;' border='1'>
      <tr>
        <th></th>
        <th>Description</th>
        <th>Priority</th>
        <th>Date Created</th>
        <th>Date Completed</th>
      </tr>
      <?php if($tasks)
      {
        while ($row = $tasks->fetch_array())
        {
          echo
          "<tr>
          <td><input class='taskrow' type='checkbox'/ value=".$row['id']."></td>
          <td>".$row['description']."</td>
          <td>".$row['priority']."</td>
          <td>".$row['dateCreated']."</td>
          <td>".$row['dateCompleted']."</td>
          <td>
            <a data-id=".$row['id']." href=\"#\">Delete</a>
          </td>
        </tr>";
      }
    }
    ?>
    </table><br>
    <button id="deleteRows">Delete Selected</button>
    <form id="newPost" method="POST" action="Proj1Structure.php">
    <h2>Add a new task:</h2>
      Task: <input type="text" name="description"><br>
      Priority:
      <select name="priority">
        <option value="1">Very low</option>
        <option value="2">Low</option>
        <option value="3">Meh</option>
        <option value="4">Important</option>
        <option value="5">Very Important</option>
      </select>
      <br>
      <input type="submit" value="Submit">
    </form>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script>
    $('[data-id]').each(function()
    {
        $(this).on('click', function(event) {
          event.preventDefault();
          deleteRow([$(this).data('id')]);
        });
      });

      $('#deleteRows').on('click', function(event) {
        var obj = [];
        $('.taskrow:checked').each(function() {
          obj.push(parseInt($(this).val(), 10));
        });
        deleteRow(obj);
      });

      // New task submission
      $('#newPost').on('submit', function(event) {
        event.preventDefault();

        // If description is empty return
        var $description = $(this).find('input[name="description"]');
        if($description.val().trim() === '') {
          $description.val('');
          return;
        }

        // Send data through POST
        $.ajax({ url: 'Proj1Structure.php',
          data: {
            action: 'newItem',
            data: JSON.stringify($(this).serialize())
          },
          type: 'post',
          success: function(output) {
            console.log(output);
            location.reload();
          }
        });

      });

      function newItem(data) {

      }

      function deleteRow(ids) {
        $.ajax({ url: 'Proj1Structure.php',
          data: {
            action: 'delete',
            data: JSON.stringify(ids)
          },
          type: 'post',
          success: function(output) {
            console.log(output);
            location.reload();
          }
        });
      }
    </script>
  </body>
</html>