Adding (unimplemented) buttons to HTML/JS.

static/JS/Manage_Coworking_Spaces.js

 // Replaces the onSubmit attribute for the addRecord form.
 function onSubmitLoad() {
+  document.getElementById('searchButton').addEventListener('click',searchRecord);
   document.getElementById('addButton').addEventListener('click',addRecord);
+  document.getElementById('editButton').addEventListener('click',editRecord);
+  document.getElementById('deleteButton').addEventListener('click',deleteRecord);
 }
 
 function headerLoad() {
@@ -31,12 +34,50 @@ function pageLoad() {
   headerLoad();
 }
 
-// Adds a record to the CSV file.
+// Searches for a record in the database.
+function searchRecord(e) {
+  // Removes the standard form processing.
+  e.preventDefault();
+  e.stopPropagation();
+
+  // Assigning form element values to variables.
+  var recordName = document.getElementById("recordName").value;
+  var recordAddress = document.getElementById("recordAddress").value;
+  var recordMainPhotos = document.getElementById("recordMainPhotos").value;
+  var recordAdditionalPhotos = document.getElementById("recordAdditionalPhotos").value;
+  var recordDescription = document.getElementById("recordDescription").value;
+  var recordWebsite = document.getElementById("recordWebsite").value;
+  var recordEmail = document.getElementById("recordEmail").value;
+  var recordPhoneNumber = document.getElementById("recordPhoneNumber").value;
+  var recordOpeningHours = document.getElementById("recordOpeningHours").value;
+  var recordCheckinInstructions = document.getElementById("recordCheckinInstructions").value;
+
+  // Creating a form data-type to transfer multiple parameters to the server.
+  var params = 'recordName='+recordName+'&recordAddress='+recordAddress+'&recordMainPhotos='+recordMainPhotos+'&recordAdditionalPhotos='+recordAdditionalPhotos+'&recordDescription='+recordDescription+'&recordWebsite='+recordWebsite+'&recordEmail='+recordEmail+'&recordPhoneNumber='+recordPhoneNumber+'&recordOpeningHours='+recordOpeningHours+'&recordCheckinInstructions='+recordCheckinInstructions;
+
+  var xhttp = new XMLHttpRequest();
+  xhttp.open("POST", '/SearchRecord', true);
+  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+  xhttp.onreadystatechange = function() {
+    if (xhttp.readyState === 4 && xhttp.status === 200) {
+      console.log(xhttp.responseText);
+      document.getElementById("DEBUGserverMessage").innerHTML = xhttp.responseText;
+    } else {
+      console.error(`Status Text: ${xhttp.statusText}.`);
+      console.error(`Ready State: ${xhttp.readyState}.`);
+    }
+  };
+  xhttp.send(params);
+}
+
+
+// Adds a record to the database.
 function addRecord(e) {
   // Removes the standard form processing.
   e.preventDefault();
   e.stopPropagation();
 
+  // Assigning form element values to variables.
   var recordName = document.getElementById("recordName").value;
   var recordAddress = document.getElementById("recordAddress").value;
   var recordMainPhotos = document.getElementById("recordMainPhotos").value;
@@ -48,6 +89,7 @@ function addRecord(e) {
   var recordOpeningHours = document.getElementById("recordOpeningHours").value;
   var recordCheckinInstructions = document.getElementById("recordCheckinInstructions").value;
 
+  // Creating a form data-type to transfer multiple parameters to the server.
   var params = 'recordName='+recordName+'&recordAddress='+recordAddress+'&recordMainPhotos='+recordMainPhotos+'&recordAdditionalPhotos='+recordAdditionalPhotos+'&recordDescription='+recordDescription+'&recordWebsite='+recordWebsite+'&recordEmail='+recordEmail+'&recordPhoneNumber='+recordPhoneNumber+'&recordOpeningHours='+recordOpeningHours+'&recordCheckinInstructions='+recordCheckinInstructions;
 
   var xhttp = new XMLHttpRequest();
@@ -64,3 +106,75 @@ function addRecord(e) {
   };
   xhttp.send(params);
 }
+
+// Edits a record in the database.
+function editRecord(e) {
+  // Removes the standard form processing.
+  e.preventDefault();
+  e.stopPropagation();
+
+  // Assigning form element values to variables.
+  var recordName = document.getElementById("recordName").value;
+  var recordAddress = document.getElementById("recordAddress").value;
+  var recordMainPhotos = document.getElementById("recordMainPhotos").value;
+  var recordAdditionalPhotos = document.getElementById("recordAdditionalPhotos").value;
+  var recordDescription = document.getElementById("recordDescription").value;
+  var recordWebsite = document.getElementById("recordWebsite").value;
+  var recordEmail = document.getElementById("recordEmail").value;
+  var recordPhoneNumber = document.getElementById("recordPhoneNumber").value;
+  var recordOpeningHours = document.getElementById("recordOpeningHours").value;
+  var recordCheckinInstructions = document.getElementById("recordCheckinInstructions").value;
+
+  // Creating a form data-type to transfer multiple parameters to the server.
+  var params = 'recordName='+recordName+'&recordAddress='+recordAddress+'&recordMainPhotos='+recordMainPhotos+'&recordAdditionalPhotos='+recordAdditionalPhotos+'&recordDescription='+recordDescription+'&recordWebsite='+recordWebsite+'&recordEmail='+recordEmail+'&recordPhoneNumber='+recordPhoneNumber+'&recordOpeningHours='+recordOpeningHours+'&recordCheckinInstructions='+recordCheckinInstructions;
+
+  var xhttp = new XMLHttpRequest();
+  xhttp.open("POST", '/EditRecord', true);
+  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+  xhttp.onreadystatechange = function() {
+    if (xhttp.readyState === 4 && xhttp.status === 200) {
+      console.log(xhttp.responseText);
+      document.getElementById("DEBUGserverMessage").innerHTML = xhttp.responseText;
+    } else {
+      console.error(`Status Text: ${xhttp.statusText}.`);
+      console.error(`Ready State: ${xhttp.readyState}.`);
+    }
+  };
+  xhttp.send(params);
+}
+
+// Deletes a record in the database.
+function deleteRecord(e) {
+  // Removes the standard form processing.
+  e.preventDefault();
+  e.stopPropagation();
+
+  // Assigning form element values to variables.
+  var recordName = document.getElementById("recordName").value;
+  var recordAddress = document.getElementById("recordAddress").value;
+  var recordMainPhotos = document.getElementById("recordMainPhotos").value;
+  var recordAdditionalPhotos = document.getElementById("recordAdditionalPhotos").value;
+  var recordDescription = document.getElementById("recordDescription").value;
+  var recordWebsite = document.getElementById("recordWebsite").value;
+  var recordEmail = document.getElementById("recordEmail").value;
+  var recordPhoneNumber = document.getElementById("recordPhoneNumber").value;
+  var recordOpeningHours = document.getElementById("recordOpeningHours").value;
+  var recordCheckinInstructions = document.getElementById("recordCheckinInstructions").value;
+
+  // Creating a form data-type to transfer multiple parameters to the server.
+  var params = 'recordName='+recordName+'&recordAddress='+recordAddress+'&recordMainPhotos='+recordMainPhotos+'&recordAdditionalPhotos='+recordAdditionalPhotos+'&recordDescription='+recordDescription+'&recordWebsite='+recordWebsite+'&recordEmail='+recordEmail+'&recordPhoneNumber='+recordPhoneNumber+'&recordOpeningHours='+recordOpeningHours+'&recordCheckinInstructions='+recordCheckinInstructions;
+
+  var xhttp = new XMLHttpRequest();
+  xhttp.open("POST", '/DeleteRecord', true);
+  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+  xhttp.onreadystatechange = function() {
+    if (xhttp.readyState === 4 && xhttp.status === 200) {
+      console.log(xhttp.responseText);
+      document.getElementById("DEBUGserverMessage").innerHTML = xhttp.responseText;
+    } else {
+      console.error(`Status Text: ${xhttp.statusText}.`);
+      console.error(`Ready State: ${xhttp.readyState}.`);
+    }
+  };
+  xhttp.send(params);
+}

static/Manage_Coworking_Spaces.html

@@ -22,13 +22,12 @@
           <li><a href="Manage_Coworking_Spaces.html">
             <img id="navImg" class="navImg"
             src="Media/Tramshed-Logo-Main-White.png"></img></a></li>
-          <li><a href="Manage_Coworking_Spaces.html">Left</a></li>
           <li><a href="Manage_Coworking_Spaces.html">Home</a></li>
-          <li><a href="Manage_Coworking_Spaces.html">Left</a></li>
+          <li><a href="Manage_Coworking_Spaces.html">Locations</a></li>
         </ul>
         <ul class="Right">
-          <li><a href="Manage_Coworking_Spaces.html">Home</a></li>
-          <li><a href="Manage_Coworking_Spaces.html">Right</a></li>
+          <li><a href="Manage_Coworking_Spaces.html">Manage</a></li>
+          <li><a href="Manage_Coworking_Spaces.html">Login</a></li>
           <li><div class="navHamburger">
               <span></span>
               <span></span>
@@ -62,7 +61,10 @@
           name="record_CI" type="text"></label>
 
         <br><br>
+        <button id="searchButton" type="submit">Search</button>
         <button id="addButton" type="submit">Add</button>
+        <button id="editButton" type="submit">Edit</button>
+        <button id="deleteButton" type="submit">Delete</button>
       </form>
       <br>
       <span id="DEBUGserverMessage"> </span>