HTML: how to show a form input in a table?-ThrowExceptions

Exception or error:

I am new to HTML and I am wondering how do I convert the form inputs into a table?
I created a display button, so that when I click on it, the information submitted by a user will be displayed in a table.

<html>
    <style>
    </style>
    <body>

    <p> Please insert the following information for your Gym Membership.</p>

    <form>
      <br>
      <label for="name">Name:</label>
      <input type="text" id="name">
      <br><br>
  
       <label for="age">Age (between 18-60):</label>
       <input type="number" id="age" min="18" max="60"><br><br>

       <label for="cars">Select your height (feet and inches):</label>
       <select id="feet">
       <option value="4">4'</option>
       <option value="5">5'</option>
       <option value="6">6'</option>
     </select>
      <select id="inches">
      <option value="1">1"</option>
      <option value="2">2"</option>
      <option value="3">3"</option>
      <option value="4">4"</option>
      <option value="5">5"</option>
      <option value="6">6"</option>
      <option value="7">7"</option>
      <option value="8">8"</option>
      <option value="9">9"</option>
      <option value="10">10"</option>
      <option value="11">11"</option>
    </select>
         <br>
         <br>
      <input type="reset" value="Reset">
      <input type="submit" value="Display">
    </form>



    </body>
    </html>
How to solve:

It’s mandatory to add some javascript to it.

Since you’re new to HTML/javascript, I modified your snippet of code to meet your needs.

HTML :

<html>
    <style>
    </style>
    <b>

    <p> Please insert the following information for your Gym Membership.</p>

   <form action="#" method="post" name="form_name" id="form_id" class="form_class" >
      <br>
      <label for="name">Name:</label>
      <input type="text" id="name">
      <br><br>

       <label for="age">Age (between 18-60):</label>
       <input type="number" id="age" min="18" max="60"><br><br>

       <label for="cars">Select your height (feet and inches):</label>
       <select id="feet">
       <option value="4">4'</option>
       <option value="5">5'</option>
       <option value="6">6'</option>
     </select>
      <select id="inches">
      <option value="1">1"</option>
      <option value="2">2"</option>
      <option value="3">3"</option>
      <option value="4">4"</option>
      <option value="5">5"</option>
      <option value="6">6"</option>
      <option value="7">7"</option>
      <option value="8">8"</option>
      <option value="9">9"</option>
      <option value="10">10"</option>
      <option value="11">11"</option>
    </select>
         <br>
         <br>
      <input type="reset" value="Reset">
      <input type="button" Value="submit"  onclick="Display()">
    </form>
    </b>
    </html>

<div id="table"  style="display:none;" class="answer_list" > <table id="myTable">
</table></div>

Javascript :

function Display()
{
  document.getElementById('table').style.display = "block";
  var table = document.getElementById("myTable");
var row = table.insertRow(0);

var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);

cell1.innerHTML = document.getElementById("name").value;
cell2.innerHTML = document.getElementById("age").value;
cell3.innerHTML = document.getElementById("feet").value+"," +document.getElementById("inches").value;

}

or you can find it in the link below, it works fine :
https://codepen.io/iliass-coder/pen/jOPBbdz

Take some time to read it and understand what I did. and try to add some CSS, it’s a bit ugly for the moment.

Leave a Reply

Your email address will not be published. Required fields are marked *