diff --git a/sample_prep_protocol.html b/sample_prep_protocol.html
index fe0b2d1..84ed618 100644
--- a/sample_prep_protocol.html
+++ b/sample_prep_protocol.html
@@ -7,7 +7,7 @@
 
   <body>
     <div class="container">
-      <form class="needs-validation" name = "sample">
+      <form class="needs-validation" id = "sample">
         <div class="row">
           <div class="col">
             <label class = "form-label" for="name">
@@ -73,7 +73,7 @@
             </textarea>
           </div>
         </div>
-        <button class="btn btn-primary float-end" onclick="add();">submit</button>
+        <button class="btn btn-primary float-end" type="submit">submit</button>
       </form>
     </div>
   </body>
@@ -97,8 +97,12 @@
     db = openRequest.result;
     // continue working with database using db object
   };
-  function add(e){
-    e.preventDefault();
+
+  const form = document.getElementById("sample");
+  form.addEventListener("submit", add);
+
+
+  function add(event){
     let prep_protocol = {
       "name" : document.getElementById("name").value,
       "Sample_Size" : document.getElementById("Sample_Size").value,
@@ -116,6 +120,8 @@
       console.log("something went wrong");
       // Don't forget to handle errors!
     };
+    event.preventDefault();
+
     return false;
   }
 
