object-data-form/app.js at main · BeenaAnam/object-data-form · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
let person = {};
const output = document.getElementById("output");

function addData() {
  person.name = document.getElementById("name").value;
  person.fatherName = document.getElementById("Fname").value;
  person.email = document.getElementById("email").value;
  person.id = document.getElementById("rollNo").value;
  person.batch = document.getElementById("batch").value;

  if (person.name && person.fatherName && person.email && person.id && person.batch) {
    alert("Your Data submitted successfully ✔");

    output.textContent = JSON.stringify(person, null, 2); // show data properly
    output.style.display = "block";
  } else {
    alert("Please fill out all fields ❌");
    output.style.display = "none";
  }
}

function showKeys() {
  output.textContent = Object.keys(person).join(", ");
  output.style.display = "block";
}

function showValues() {
  output.textContent = Object.values(person).join(", ");
  output.style.display = "block";
}

// let persons = [];

// document.getElementById("showData").addEventListener("click", (e) => {
//   e.preventDefault();

//   const name = document.getElementById("name").value;
//   const age = document.getElementById("email").value;
//   const stdId = document.getElementById("rollNo").value;
//   const fatherName = document.getElementById("Fname").value;
//   const batch = document.getElementById("batch").value;
//   const output = document.getElementById("output");

//   if (name && age && stdId && fatherName && batch) {
//     const student = { name, age, stdId, fatherName, batch };
//     persons.push(student);
//     alert("Your form submitted successfully ✔");
//     document.getElementById("stdForm").reset();
//     output.style.display = "block";
//     output.innerHTML = `<pre>${JSON.stringify(persons, null, 2)}</pre>`;
//   } else {
//     alert("Please fill out all fields ❌");
//   }
// })
// document.getElementById("showKeys").addEventListener("click", function () {
//   const output = document.getElementById("output");

//     const keys = Object.keys(persons[0]);
//     output.style.display = "block";
//     output.innerHTML = `<pre>${JSON.stringify(keys, null, 2)}</pre>`;
// });
// document.getElementById("showValues").addEventListener("click", function () {
//   const output = document.getElementById("output");

//     const keys = Object.values(persons[0]);
//     output.style.display = "block";
//     output.innerHTML = `<pre>${JSON.stringify(keys, null, 2)}</pre>`;
// });