diff --git a/src/static/index.js b/src/static/index.js
index 4bfeede..944a4c3 100644
--- a/src/static/index.js
+++ b/src/static/index.js
@@ -35,6 +35,27 @@ for (const cancelButton of cancelButtons) {
     cancelButton.addEventListener("click", handleCancelClick);
 };
 
+function handleSubmitClick(event) {
+    const rowId = getRowId(event.srcElement.id);
+    // Toggle visibilities of buttons.
+    toggleVisible(event.srcElement.id);
+    toggleAllOfSame("button[id^='edit-button-']");
+    toggleAllOfSame("button[id^='cancel-button-" + CSS.escape(rowId) + "']");
+    toggleAllOfSame("div[id$=" + CSS.escape(rowId) + "]");
+
+    // Replace cancelled input text with existing cell text.
+    var allInputs = document.querySelectorAll("input");
+    var allTextCells = document.querySelectorAll("div[id$='cell-text-" + CSS.escape(rowId) + "']");
+    for (let i = 0; i < allTextCells.length; i++) {
+        allTextCells[i].textContent = allInputs[i].value;
+    };
+};
+// Get a NodeList Obj of all cancel buttons, add EventListener to each.
+var submitButtons = document.querySelectorAll("button[id^='submit-button-']");
+for (const submitButton of submitButtons) {
+    submitButton.addEventListener("click", handleSubmitClick);
+};
+
 // Helper function to get rowId.
 function getRowId(idName) {
     const rowId = idName.slice(idName.lastIndexOf("-") + 1,idName.length);
diff --git a/src/static/simple.css b/src/static/simple.css
index a2e5ffb..1dfce58 100644
--- a/src/static/simple.css
+++ b/src/static/simple.css
@@ -443,6 +443,7 @@ button,
   max-width: 100%;
   display: inline-block;
 }
+
 textarea,
 select,
 input {
@@ -742,4 +743,4 @@ input {
   background: #04AA6D;
   color : white;
   border-color: #04AA6D;
-}
\ No newline at end of file
+}