SO - 39113565

by Arun P Johny

HTML

<div id="container">
  <form id="databaseActionForm" name="databaseActionForm" method="POST" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>">
    <table border=0 style="margin: 50px auto; text-align: right;">
      <tr style="text-align: center; font-weight: bold; font-size: 1.5em; text-decoration: underline;">
        <th>Action</th>
        <th>Additional Info</th>
        <th>Button</th>
      </tr>
      <tr name="Clear">
        <td>Erase Database</td>
        <td style="text-align: center;">ARE YOU SURE?</td>
        <td>
          <input type="button" id="erase" name="erase" value="ERASE ALL?" />
        </td>
      </tr>
      <tr name="Update">
        <td>Update Value</td>
        <td>
          Entry ID:
          <input type="text" id="updateAppID" name="updateAppID" placeholder="App entryID" />
          <br /> Field Name:
          <input type="text" id="fieldName" name="fieldName" placeholder="Field to change" />
          <br /> New Value:
          <input type="text" id="newValue" name="newValue" placeholder="New value" />
          <br />
        </td>
        <td>
          <input type="button" id="update" name="update" value="Update Value" />
        </td>
      </tr>
      <tr name="Delete">
        <td>Delete Payment</td>
        <td>
          Entry ID:
          <input type="text" id="deleteAppID" name="deleteAppID" placeholder="App entryID" />
        </td>
        <td>
          <input type="button" id="delete" name="delete" value="Delete Entry" />
        </td>
      </tr>
    </table>
    <input type="hidden" id="buttonTypePressed" name="buttonTypePressed" />
    <input type="submit" id="bsubmit" name="bsubmit" value="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;" tabindex="-1" />
  </form>
</div>

CSS

table td {
  border: 1px solid black;
}

table td:first-child {
  text-align: left;
}

JavaScript

$(document).ready(function() {
  $('#erase').click(function() {
    if (confirm("Are you sure that you want to ERASE ALL DATA from the database?")) {
      $('#buttonTypePressed').val("erase");

      $('#databaseActionForm').submit(); <!-- HERE -->
    }
  });

  $('#update').click(function() {
    var appID = $('#updateAppID').val();
    var field = $('#fieldName').val();
    var value = $('#newValue').val();

    if (appID == null || appID == "") {
      alert("You must enter the ID number of the entry you wish to modify.");
      $('#updateAppID').focus();
    } else if (field == null || field == "") {
      alert("You must choose which field you wish to modify.");
      $('#fieldName').focus();
    } else if (value == null || value == "") {
      alert("You must choose the new value you wish to appear in the database.");
      $('#newValue').focus();
    } else {
      $('#buttonTypePressed').val("update");
      $('#databaseActionForm').submit(); <!-- HERE -->
    }
  });

  $('#delete').click(function() {
    var appID = $('#deleteAppID').val();

    if (appID == null || appID == "") {
      alert("You must enter the ID number of the entry you wish to delete.");
      $('#deleteAppID').focus();
    } else {
      $('#buttonTypePressed').val("delete");
      $('#databaseActionForm').submit(); <!-- HERE -->
    }
  });
});