I have a basic HTML form that takes input from the user about his age, gender, dob, email and contact number. I save it into the local storage as employeeData by making it an object in an array. [{},{},{}]. I also add a User_id that is calculated by a random function generator and display it using the Javascript. An example is mentioned below.
[
{
"U_Id": "1a9f1268-9c74-4cfb-971c-f595cb4a40e1",
"Name": "dsgfdsfds",
"Gender": "Male",
"Dob": "2022-02-04",
"Email": "[email protected]",
"Tel": "9958111111",
"Hobbies": [
"Coding"
]
},
{
"U_Id": "d7e5b305-4604-4831-b168-96136a7b4ea5",
"Name": "dghdghdhddh",
"Gender": "Male",
"Dob": "2022-02-04",
"Email": "[email protected]",
"Tel": "8989092345",
"Hobbies": [
"Coding",
"Gaming"
]
}
]
I create the object to store using const formData = new FormData(form);.
Now when I am fetching the data to display it back into the form, I am using the following function –
const empIndex = employeeData[index];
const form = document.getElementById("form");
for(let i=0;i<form.length;i++){
console.log(form.elements[i])
console.log(empIndex[keys[i]]);
form.elements[i].value = empIndex[keys[i]];
}
const gender = empIndex.Gender;
const hobbies = empIndex.Hobbies;
form.elements[0].value = empIndex.Name;
But the issue is, the radio buttons are treated as 2 different entities and not as 1, which is why I have to individually set the name as Name and what happens is shown below-
This is how the console looks after the logs
I need to know why does the HTML not deals the radio buttons as a group and a single entity, but rather makes it seperate entities, forcing me to input values with the loop into all the form elements, meanwhile I have created a group for a reason to be able to treat it as a single entity, just like an array. An array is a group of entities, but the HTML radio button group is not a group? Anyway to go about it?
console.log("i am inside the script");
var incorrect = true;
function uuidv4() {
return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
(
c ^
(crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
).toString(16)
);
}
function namechecker(name) {
if (name == "" || name.length < 5 || name.length > 45) {
document.getElementById("namehidden").style.display = "contents";
} else {
document.getElementById("namehidden").style.display = "none";
incorrect = false;
}
}
function dobChecker(dob) {
if (!dob) {
document.getElementById("dobhidden").style.display = "contents";
} else {
document.getElementById("dobhidden").style.display = "none";
incorrect = false;
}
}
function emailChecker(email) {
const emailRegex =
/^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
if (!(email && emailRegex.test(email))) {
document.getElementById("emailhidden").style.display = "contents";
incorrect = true;
} else {
document.getElementById("emailhidden").style.display = "none";
incorrect = false;
}
}
function phChecker(phone) {
const phRegex = /^[6-9]d{9}$/;
if (!phRegex.test(phone)) {
console.log("Phone number is incorrect");
document.getElementById("telhidden").style.display = "contents";
incorrect = true;
} else {
document.getElementById("telhidden").style.display = "none";
incorrect = false;
}
}
function incorrectForm(name, dob, email, tel) {
console.log(incorrect);
namechecker(name);
dobChecker(dob);
emailChecker(email);
phChecker(tel);
if (!incorrect) return false;
else return true;
}
function Init(form) {
const formData = new FormData(form);
const name = formData.get("name");
const dob = formData.get("dob");
const gender = formData.get("gender");
const email = formData.get("email");
const tel = formData.get("tel");
const markedCheckbox = document.getElementsByName("hobbies");
const hobbies = [];
for (var checkbox of markedCheckbox) {
if (checkbox.checked) {
hobbies.push(checkbox.value);
}
}
if (incorrectForm(name, dob, email, tel)) {
console.log(
"The form is incorrect. Kindly check and input correct entries."
);
alert("The Form is Incorrect. Kindly check the values and fill it correctly.")
} else {
return {
U_Id: uuidv4(),
Name: name,
Gender: gender,
Dob: dob,
Email: email,
Tel: tel,
Hobbies: hobbies,
};
}
}
const but = document.getElementById("button");
console.log(but);
but.addEventListener("click", (event) => {
event.preventDefault();
console.log("i clicked the button");
const f = document.getElementById("form");
const object = Init(f);
if (object) {
if (!localStorage.getItem("employeeData")) {
localStorage.setItem("employeeData", JSON.stringify([object]));
} else {
const existing = JSON.parse(localStorage.getItem("employeeData"));
existing.push(object);
localStorage.setItem("employeeData", JSON.stringify(existing));
}
console.log(localStorage.getItem("employeeData"));
}
// calling another script from the button if the form is correct.
if (!incorrect) {
console.log("hi i am in basic!");
var tdStyle = "border:1px solid green;min-width:110px;";
const table = document.createElement("table");
table.setAttribute("style", "table-layout: fixed; width:max-content");
const tr = document.createElement("tr");
const employeeData = JSON.parse(localStorage.getItem("employeeData"));
console.log(employeeData);
if (employeeData){
const keys = Object.keys(employeeData[0]);
for (let i = 0; i < keys.length; i++) {
const th = document.createElement("th");
th.innerText = keys[i];
th.setAttribute("style", tdStyle);
tr.appendChild(th);
}
const action = document.createElement("th");
action.innerText = "Actions";
action.setAttribute("style", tdStyle);
tr.appendChild(action);
const thead = document.createElement("thead");
thead.appendChild(tr);
table.appendChild(thead);
const tbody = document.createElement("tbody");
function btnCreator(index) {
const buttontd = document.createElement("td");
const editBtn = document.createElement("button");
editBtn.setAttribute("id" , "edit" + index);
editBtn.innerText = "Edit";
editBtn.setAttribute("style","margin-inline-end:10px");
buttontd.setAttribute("style", tdStyle);
const delBtn = document.createElement("button");
delBtn.setAttribute("id", "delete" + index);
delBtn.innerText = "Delete";
editBtn.addEventListener("click", ()=>editListener(index));
buttontd.appendChild(editBtn);
buttontd.appendChild(delBtn);
return buttontd;
}
function editListener(index){
const empIndex = employeeData[index];
const form = document.getElementById("form");
for(let i=0;i<form.length;i++){
console.log(form.elements[i])
console.log(empIndex[keys[i]]);
form.elements[i].value = empIndex[keys[i]];
}
const gender = empIndex.Gender;
const hobbies = empIndex.Hobbies;
form.elements[0].value = empIndex.Name;
document.getElementById("chkbx1").checked = false;
document.getElementById("chkbx2").checked = false;
document.getElementById("chkbx3").checked = false;
document.getElementById("rdbox1").checked = true;
document.getElementById("rdbox2").checked = false;
if (gender =="Female"){
document.getElementById("rdbox1").checked = false;
document.getElementById("rdbox2").checked = true;
}
hobbies.forEach((element)=>{
switch (element){
case "Gaming":
document.getElementById("chkbx1").checked = true;
break;
case "Coding":
document.getElementById("chkbx2").checked = true;
break;
case "Music":
document.getElementById("chkbx3").checked = true;
break;
default:
break;
}
})
}
employeeData.forEach(function (item, index, arr) {
const tr2 = document.createElement("tr");
for (let i in item) {
const td = document.createElement("td");
td.innerText = item[i];
td.setAttribute("style", "border:1px solid green; width:100%");
tr2.appendChild(td);
}
tr2.appendChild(btnCreator(index));
tbody.appendChild(tr2);
table.appendChild(tbody);
});
const basicdiv = document.getElementsByClassName("basic")[0];
basicdiv.appendChild(table);}
else{
}
});body{
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.top-div{
display: flex;
margin-top: 200px;
font-size: larger;
font-weight: bold;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
}
.mid-div{
display: flex;
flex-direction: column;
background-color: #1282cc;
color: black;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
width: 75%;
}
.bot-div{
background-color: white;
border: solid thin #1282cc;
border-radius: 4px;
padding-bottom: 2%;
}
form{
width: 100%;
display: flex;
flex-direction: column;
}
.namelabel{
margin-top: 10px;
}
.col-25 {
float: left;
text-align: right;
width: 22%;
margin-top: 6px;
}
.col-75 {
float: right;
width: 73%;
margin-right: 2%;
}
.required{
color: red;
}
.dob ,.tel,.email{
width: 100%;
}
.vertical{
margin: 0 2.5% 0 0;
}
#button{
background-color: #1282cc;
color: white;
margin-top: 5%;
padding: 1% 2%;
border: #1282cc solid thin;
border-radius: 4px ;
}
span.items{
color:black;
padding-left: 0;
}
div span{
color: white;
font-size: medium;
font-weight: lighter;
padding:15px;
}
* {
box-sizing: border-box;
}
input[type=text] {
width: 100%;
height: 25px;
border: 1px solid #ccc;
margin: 32px 12px 12px 0;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
input[type=radio]{
margin: 23px 12px 12px 0;
}
input[type=date] {
margin: 20px 12px 12px 0;
border: 1px solid #ccc;
height: 25px;
}
input[type=email] {
margin: 23px 12px 12px 0;
border: 1px solid #ccc;
height: 25px;
}
input[type=tel]{
margin: 23px 12px 12px 0;
border: 1px solid #ccc;
height: 25px;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
.hidden{
font-size: small;
color: red;
display: none;
}
.container {
background-color: white;
padding: 20px;
border: blue 1px solid;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width:840px) {
.parent{
display: flex;
flex-direction: column;
}
.col-75{
margin: 0;
margin-left: 5%;
}
.col-25{
width: 100%;
margin: 0%;
padding: 12px;
text-align: left;
}
input[type=text] {
margin: 10px 12px 12px 0;
}
input[type=email] {
margin: 10px 12px 12px 0;
}
input[type=tel]{
margin: 10px 12px 12px 0;
}
input[type=radio]{
margin: 5px 5px 0 0;
}
.mf{
display: flex;
}
}
/* Adding styling for basic table */
.basic{
display: flex;
flex-direction: row;
width: 100%;
overflow-x: auto;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<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>Employee Data</title>
<script src="basic.js" defer></script>
</head>
<body>
<div class="top-div">
<h2>Employee</h2>
<div class="mid-div">
<span>Add Employee</span>
<div class="bot-div">
<form action="" id="form">
<div class="parent">
<div class="col-25">
<label class="namelabel"> Name:</label>
</div>
<div class="col-75">
<input name="name" type="text" maxlength="45" minlength="5" placeholder="Your Name" />
<label class="hidden" id="namehidden">This field is required</label>
</div>
</div>
<div class="parent">
<div class="col-25">
<label> Gender:</label>
</div>
<div class="col-75 mf">
<div>
<input type="radio" class="radio" name="gender" value="Male" id="rdbox1" checked /><span class="items">Male</span>
</div>
<div><input type="radio" class="radio" name="gender" value="Female" id="rdbox2"/><span class="items">Female</span>
</div>
</div>
</div>
<div class="parent">
<div class="col-25">
<label> Date of Birth:</label>
</div>
<div class="col-75">
<input type="date" name="dob" class="dob" /><br>
<label class="hidden visible" id="dobhidden">This field is required</label>
</div>
</div>
<div class="parent">
<div class="col-25">
<label> Email:</label>
</div>
<div class="col-75">
<input type="email" placeholder="Enter Email" name="email" class="email" />
<br>
<label class="hidden" id="emailhidden">This field is required</label>
</div>
</div>
<div class="parent">
<div class="col-25">
<label> Phone:</label>
</div>
<div class="col-75">
<input type="tel" placeholder="Enter phone" name="tel" class="tel" />
<br>
<label class="hidden" id="telhidden">This field is incorrect</label>
</div>
</div>
<div class="parent">
<div class="col-25">
<label class="padding"> Hobbies:</label>
</div>
<div class="col-75 vertical" name="hobbies">
<input class="chkbox" type="checkbox" name="hobbies" value="Gaming" id="chkbx1" /><span
class="items">Gaming</span> <br>
<input class="chkbox" type="checkbox" name="hobbies" value="Coding" id="chkbx2" /><span
class="items">Coding</span> <br>
<input class="chkbox" type="checkbox" name="hobbies" value="Music" id="chkbx3" /><span
class="items">Music</span> <br>
</div>
</div>
<div>
<div class="col-75">
<button type="submit" id="button">Submit</button>
</div>
</div>
</form>
</div>
</div>
<h2>Basic</h2>
<div class="mid-div">
<span>Add Employee</span>
<div class="bot-div basic">
</div>
</div>
<h2>Advanced</h2>
<div class="mid-div">
<span>Add Employee</span>
<div class="bot-div">
</div>
</div>
</div>
</div>
</body>
<script src="script.js"></script>
</html>