Display form details in a table.

This article will focus on :-

• How to get data from a input tags
• How to show that data to a user on the same webpage using JS
• How to do all the above things on form submit.

Hey everyone , so this question was asked to me in an interview recently for a front end role that i had applied for.
It was a entry level role so the interviewer asked me to create a table and show the details that are submitted by the user in a table format.

So lets get started

The first thing you need to understand is the problem statement in hand .
The things that you have to do include:-

• Create a form using html & css.
• Get the inputted values from all the inputs on the submission of the form
• And then display them to the user .

So lets go ahead and create a form here

  <form action="#" id="formSubmission" method="get">
    <span>Email</span>
    <input type="Name" placeholder="enter your Name" id="name">
    <span>Age</span>
    <input type="number" placeholder="Age" id="age">
    <span>State</span>
    <input type="text" placeholder="Enter State" id="state">
    <button type="submit">Submit</button>
  </form>
 <ul id="data">
   <li>Name</li>
   <li>Age</li>
   <li>State</li>
 </ul>

So here you can see we created a form that has 3 inputs i.e

• Name
• Age
• State and we are giving each one an id to make sure we get these inputs in our javascript. Also button has a type of submit which will trigger the form submit method .

we can improve the look and feel of the form using some css

form{
  display:flex;
  flex-direction:column;
  width:35vw;
}
form input{
  padding:0.7em 1em;
}
form span{
  padding:0.6em 1em;
}
form > button{
  padding:1.1em;
  margin:1em 1em;
  cursor:pointer;
}
ul{
  list-style:none;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  justify-content:center;
  width:25vw;

}
ul li{
  padding:1em 2em .8em 2em;
  border:1px solid black;

}

So the styling is done
Now comes the javascript part.

So the things that you would need to do in javascript include
*Get references for all the inputs as well as for the form.

• Set an event listener for the submit event of the form.
• And then get the values one the triggered submit event and show it to the UI. So lets get started.

let form=document.getElementById("formSubmission");

let table=document.getElementById('data');
form.addEventListener("submit",(e)=>{
  e.preventDefault();
  submit();
})


const submit=()=>{
  let name = document.getElementById("name").value;
    let age = document.getElementById("age").value;
    let state = document.getElementById("state").value;


  let newArray = [name,age,state];
  newArray.forEach((item)=>{
      var li = document.createElement("li");
  var text = document.createTextNode(item);
  li.appendChild(text);
  table.appendChild(li);
  })
  form.reset(); 
}

• Here you can see we got the reference to our form and table first.
• Then we added the event listener to get the submit event and whenever that happens call our ** submit ** function.
• Submit function will get the values of all the inputs .
• Then we create an array using those values .
• Then we go ahead and map through them using forEach and we create a new element i.e li
• Then we create a text node and add the value of the item to it.
• Then we go ahead and append the text node to our li that we just created
• Then we appended the li to our table.

This happens for all the inputs and once done the form will be reseted using the already existing .reset() method

And the end result will look like this

So thats it.
I am sure there will be many more better ways of doing it.
If you know any other do comment below to let me know.

Thanks.

Want to encourage me to create posts like this more
Buy me a coffee