From 4576e08e84fc63ac7eb2f28c7ff222586d313759 Mon Sep 17 00:00:00 2001
From: Ashadul Islam <ashadulislamtopu23@gmail.com>
Date: Sun, 28 Jul 2024 14:22:48 +0600
Subject: [PATCH]  check output data form from value

---
 class-selector.html | 46 ++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 43 insertions(+), 3 deletions(-)
diff --git a/class-selector.html b/class-selector.html
index 73a33df..b954948 100644
--- a/class-selector.html
+++ b/class-selector.html
@@ -9,10 +9,50 @@
 </head>
 
 <body>
-    <input type="text" class="dateInput" readonly placeholder="Select a date">
-    <input type="text" class="dateInput" readonly placeholder="Select a date">
-    <input type="text" class="dateInput" readonly placeholder="Select a date">
+    <form action="#" id="form">
+        <input type="text" class="dateInput" name="dateInput1" readonly placeholder="Select a date">
+        <input type="text" class="dateInput" name="dateInput2" readonly placeholder="Select a date">
+        <input type="text" class="dateInput" name="dateInput3" readonly placeholder="Select a date">
+
+        <!-- get value -->
+        <button type="submit" id="getValueBtn">Get Value</button>
+    </form>
+    <p id="output"></p>
+
     <script src="class-selector.js"></script>
+
+    <script>
+        // Event listener to get value from input
+        // document.getElementById('getValueBtn').addEventListener('click', () => {
+        //     const dateInputs = document.querySelectorAll('.dateInput');
+        //     const output = document.getElementById('output');
+
+        //     dateInputs.forEach((input, index) => {
+        //         console.log(`Value of input ${index + 1}: ${input.value}`);
+        //         output.textContent = `Value of input ${index + 1}: ${input.value}`;
+        //     });
+
+        // Example to display the value of the first input in the output paragraph
+        // const output = document.getElementById('output');
+        // output.textContent = `Value of the first input: ${dateInputs[0].value}`;
+        // });
+        const form = document.getElementById('form');
+        form.addEventListener('submit', (event) => {
+            event.preventDefault();
+            // const dateInputs = document.querySelectorAll('.dateInput');
+            // const output = document.getElementById('output');
+            // dateInputs.forEach((input, index) => {
+            //     console.log(`Value of input ${index + 1}: ${input.value}`);
+            //     output.textContent = `Value of input ${index + 1}: ${input.value}`;
+            // });
+
+            // console.log(`Value of input: ${event.target[0].value}`);
+
+            const formData = new FormData(form);
+            const output = document.getElementById('output');
+            output.textContent = `Value of input: ${formData.get('dateInput1')}`;
+        });
+    </script>
 </body>
 
 </html>
\ No newline at end of file
