DOM Form Manipulation

Arunkumar1712 · Jan 17, 2024 · a09890e · a09890e
1 parent 7828036
commit a09890e
Show file tree

Hide file tree

Showing 3 changed files with 149 additions and 0 deletions.
diff --git a/day15 Task/form/index.html b/day15 Task/form/index.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Dom form</title>
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+  <h1 id="title">DOM Manipulation Form</h1>
+  <form id="form">
+    <div class="form-group">
+  <label id="label">FirstName</label>
+  <br>
+  <input type="text" id="first-name" name="first name" placeholder="first name" required>
+</div>
+<div class="form-group">
+  <label id="label">LastName</label>
+  <br>
+  <input type="text" id="last-name" name="last name" placeholder="last-name" required>
+</div>
+
+<div>
+  <label id="label">Gender</label>
+<div class="form-check">
+  <input class="form-check-input" type="radio" name="gender" id="flexRadioDefault1" required>
+  <label class="form-check-label" for="flexRadioDefault1">
+    Male
+  </label>
+</div>
+<div class="form-check">
+  <input class="form-check-input" type="radio" name="gender" id="flexRadioDefault2" >
+  <label class="form-check-label" for="flexRadioDefault2">
+    Female
+  </label>
+</div>
+</div>
+<label id="label">Food (At least select two)</label>
+<br>
+<select id="food" name="food" multiple required>
+  <option>Pizza</option>
+  <option>Biriyni</option>
+  <option>Veg food</option>
+  <option>Meals</option>
+  <option>dessersts</option>
+</select>
+<div class="form-group">
+  <label id="label">Address</label>
+  <br>
+  <textarea class="form-control"  id="address" placeholder="Enter your address"></textarea>
+</div>
+<div class="form-group">
+  <label id="label">pincode</label>
+  <br>
+  <input type="text" id="pincode" name="pincode" placeholder="pincode" required>
+</div>
+<div class="form-group">
+  <label id="label">state</label>
+  <br>
+  <input type="text" id="state" name="state" placeholder="state" required>
+</div>
+<div class="form-group">
+  <label id="label">country</label>
+  <br>
+  <input type="text" id="country" name="country" placeholder="country" required>
+</div>
+<button class="btn btn-primary" id="submit" onclick="submitForm()">Submit</button>
+</form>
+<div class="table">
+ <table class="table table-bordered" id="dataTable">
+  <thead>
+<tr>
+    <th >FirstName</th>
+    <th >LastName</th>
+    <th >Gender</th>
+    <th  >Food</th>
+    <th  >Address</th>
+    <th >pincode</th>
+    <th  >state</th>
+    <th  >country</th>
+
+  </tr>
+</thead>
+<tbody>
+ </tbody>
+ </table>
+
+</div>
+
+<p id="description">In this task we get Input from user and stores in the table</p>
+
+<script src="https://app.zenclass.in/sheets/v1/js/zen/suite/bundle.js"></script>
+<script src="./script.js"></script>
+
+</body>
+</html>
diff --git a/day15 Task/form/script.js b/day15 Task/form/script.js
@@ -0,0 +1,24 @@
+function submitForm() {
+    // Get form values
+    const formData = {
+      firstName: document.getElementById('first-name').value,
+      lastName: document.getElementById('last-name').value,
+      gender: document.querySelector('input[name="gender"]:checked').value,
+      food: Array.from(document.getElementById('food').selectedOptions).map(option => option.text),
+      address: document.getElementById('address').value,
+      pincode: document.getElementById('pincode').value,
+      state: document.getElementById('state').value,
+      country: document.getElementById('country').value,
+    };
+
+    // Append form values to the table
+    const tableBody = document.querySelector('#dataTable tbody');
+    const newRow = tableBody.insertRow(tableBody.rows.length);
+    Object.values(formData).forEach(value => {
+      const cell = newRow.insertCell();
+      cell.appendChild(document.createTextNode(value));
+    });
+
+    // Clear the form
+    document.getElementById('form').reset();
+  }
diff --git a/day15 Task/form/style.css b/day15 Task/form/style.css
@@ -0,0 +1,28 @@
+#label{
+    margin-left: 10px;
+    font-size: large;
+    color: black;
+    font-family:'Times New Roman', Times, serif;
+    font-weight: 400;
+    margin-top: 10px;
+}
+input{
+    margin-top: 10px;
+    margin-left:10px;
+    height: 30px;
+    width: 300px;
+    border-color:crimson;
+    margin-bottom: 10px;
+}
+#address{
+    max-width: 400px;
+    border-color:crimson;
+    margin-left: 10px;
+}
+.form-check{
+    margin-left: 10px;
+}
+#food{
+    margin-left: 10px;
+    width: 100px;
+}