Preventing Default Event Actions

RakibRahman · RakibRahman · commit 3ec5e73f1b42 · 2021-04-29T15:52:16.000+06:00
diff --git a/DOM/prevent-default-event-actions.html b/DOM/prevent-default-event-actions.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title> </title>
+  </head>
+  <body>
+    <div id="output"></div>
+
+    <script>
+      const output = document.getElementById("output");
+      output.innerHTML = `
+      
+        <form>
+            <label>
+                Username: <input type="text"/>
+                </label>
+                </br>
+                <label>
+                <input type="checkbox"/>  I Agree
+                 </label>
+            
+            </form>
+      
+      `;
+
+      const form = document.querySelector("form");
+      const user = form.querySelector("input[type=text]");
+      const checkbox = form.querySelector("input[type=checkbox]");
+
+      function handleSubmit(event) {
+        if (!checkbox.checked) {
+          event.preventDefault();
+          console.log("Terms are not selected");
+          console.log(event.defaultPrevented);
+          return;
+        }
+        console.log("Submitted", user.value);
+      }
+
+      form.addEventListener("submit", handleSubmit);
+      // checkbox.addEventListener("click", (event) => {
+      //   event.preventDefault();
+      // });
+    </script>
+  </body>
+</html>
