While building a mini app using JavaScript,HTML and CSS. I am getting 'undefined' value for the selected dropdown

Question

I was trying to build an interface where I can print the values that the user enters into a table and then it keeps updating. The basic functionality is working fine but the value from the drop down (both Test Type and Product Type) is showing as 'Undefined' when i make an entry in the table. Can anyone please help me fix the issue.

var row=1
var entry=document.getElementById("entry");
entry.addEventListener("click",displayDetails);

function displayDetails(){
    
    var name =document.getElementById("name").value;
    var email= document.getElementById("email").value;
    var TestType= document.getElementsByName("TP").value;
    var ProductType= document.getElementById("product_type").value;
    var IP= document.getElementById("txta_address").value;
    var Inputs= document.getElementById("num_inputs").value;

    if(name =='' || email == '' || TestType=='' || ProductType=='' || IP == ''|| Inputs == ''){
        alert("Please fill all the fields!");
        return;
    }



    var display = document.getElementById("display");

    var newRow = display.insertRow(row);

    var cell1 = newRow.insertCell(0);
    var cell2 = newRow.insertCell(1);
    var cell3 = newRow.insertCell(2);
    var cell4 = newRow.insertCell(3);
    var cell5 = newRow.insertCell(4);
    var cell6 = newRow.insertCell(5);



    cell1.innerHTML = name;
    cell2.innerHTML = email;
    cell3.innerHTML = TestType;
    cell4.innerHTML = ProductType;
    cell5.innerHTML = IP;
    cell6.innerHTML = Inputs;
    

}

* {
    margin: 1;
    padding: 1;
  }

  html{
      background : radial-gradient(rgba(179,255,255,0.5),rgba(255,255,255,0.5))
  }

  #nameDiv{
      margin-top: 50px;
  }

  .input{
      font-size: 25px;
      color: #004d00;
      font-style: initial;
      font-family: 'Times New Roman', Times, serif;    
      margin: 5px;
  }

  #entry{
      width : 150px;
      height: 60px;
      font-size: 25px;
      font-family: 'Times New Roman', Times, serif;    
      background-color: #05193d;
      color: whitesmoke;
      box-shadow: 0 2px 2px 0 rgba(0,0,0,0.5);
      margin-top: 10px;
  }

  table{
      border-collapse: collapse;
      border: #05193d;
      width: 70%;
      margin: 50px auto;
      background-color: burlywood;
  }

  table,th,td{
      border: 5px solid black;
      padding: 30px;

  }

  th{
      font-size: 30px;
      font-family: 'Times New Roman', Times, serif;
      font-weight: 700;
      color: #004d00;
  }
  
  td{
    font-size: 30px;
    font-family: 'Times New Roman', Times, serif;
    color: crimson;
    font-weight: 700;
    font-size: 30px;
    font-family: 'Times New Roman', Times, serif;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="style.css">
 <title>Web Application</title>
 
</head>
<body>
 
<h2>User Input Form</h2>


<h4>Enter your details first</h4>
<div id="container">
 
  <div id="nameDiv" class="input"><strong>Enter your name: </strong><input id="name" type="text" placeholder="First Last" required/></div>
   <br>
   <br>
  <div class="input"><strong>Enter your Email: </strong><input id="email" type="text" placeholder="YOURNAME@DOMAIN.COM" required/></div>
   <br>
   <br>
  <div class="input"><label for="Test Types" id="tst_type"><strong>Test Type: </strong></label>
  <select size="1" id="tst_type" name="TP" >
  <option value=""> - Select - </option>
  <option value="Manufacturing">Manufacturing</option>
  <option value="Channel">Channel</option>
  <option value="DVT" >DVT</option></select>
  
  </div>
  
   <br>
   <br>
  <div class="input"><label for="Product Types" id="product_type"><strong>Product Type: </strong></label>
  <select size="1" id="product_type" name="PT">
  <option value=""> - Select - </option>
  <option value="RAID">RAID</option>
  <option value="RBOD">RBOD</option>
  <option value="EBOD">EBOD</option>
  <option value="iSCSI">iSCSI</option></select></div>
  

   <br>
   <br>
  <div class="input"><strong>IP Address: </strong><input id="txta_address" type="text" placeholder="10.10.10.10" required/></div>
  <br>
  <br>
  <div class="input"><label for="No_of_Inputs"><strong>Number of Chasis Input: </strong></label><input id="num_inputs" type="text" placeholder="1" required/></div>
  <br>
  <br>
<button id="entry">Submit Information</button>
 
</div>
<script src="main.js"></script>
 
<table id="display">
 <tr>
  <th>Name</th>
  <th>Email</th>
  <th>Test Type</th>
  <th>Product Type</th>
  <th>IP Address</th>
  <th>Chasis Inputs</th>
 </tr>

</table>

</body>
</html>

`getElementsByName` returns a collection, not an element. You also have duplicate IDs for `product_type`, which is invalid HTML, so the ` — CertainPerformance, Jan 07 '20 at 04:50
@CertainPerformance, thanks a lot. The issue got fixed :) One more question though, is there any way by which i get only the most recent entry made by the user and show it in the table. Right now the latest entry is coming after the previously made entry — Pyhton_learner, Jan 07 '20 at 04:59

score 0 · Answer 1 · answered Jan 07 '20 at 04:53

There are two separate mistakes.

First var TestType= document.getElementsByName("TP").value; and second duplicate id

getElementsByName returns a collection so you have to use like var TestType = document.getElementsByName("TP")[0].value;.

Secondly both div & select have same id. So the code is considering the div and giving undefined value

var row = 1
var entry = document.getElementById("entry");
entry.addEventListener("click", displayDetails);

function displayDetails() {

  var name = document.getElementById("name").value;
  var email = document.getElementById("email").value;
  var TestType = document.getElementsByName("TP")[0].value;
  var ProductType = document.getElementById("product_type_select").value;
  var IP = document.getElementById("txta_address").value;
  var Inputs = document.getElementById("num_inputs").value;

  if (name == '' || email == '' || TestType == '' || ProductType == '' || IP == '' || Inputs == '') {
    alert("Please fill all the fields!");
    return;
  }



  var display = document.getElementById("display");

  var newRow = display.insertRow(row);

  var cell1 = newRow.insertCell(0);
  var cell2 = newRow.insertCell(1);
  var cell3 = newRow.insertCell(2);
  var cell4 = newRow.insertCell(3);
  var cell5 = newRow.insertCell(4);
  var cell6 = newRow.insertCell(5);



  cell1.innerHTML = name;
  cell2.innerHTML = email;
  cell3.innerHTML = TestType;
  cell4.innerHTML = ProductType;
  cell5.innerHTML = IP;
  cell6.innerHTML = Inputs;


}

* {
  margin: 1;
  padding: 1;
}

html {
  background: radial-gradient(rgba(179, 255, 255, 0.5), rgba(255, 255, 255, 0.5))
}

#nameDiv {
  margin-top: 50px;
}

.input {
  font-size: 25px;
  color: #004d00;
  font-style: initial;
  font-family: 'Times New Roman', Times, serif;
  margin: 5px;
}

#entry {
  width: 150px;
  height: 60px;
  font-size: 25px;
  font-family: 'Times New Roman', Times, serif;
  background-color: #05193d;
  color: whitesmoke;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.5);
  margin-top: 10px;
}

table {
  border-collapse: collapse;
  border: #05193d;
  width: 70%;
  margin: 50px auto;
  background-color: burlywood;
}

table,
th,
td {
  border: 5px solid black;
  padding: 30px;
}

th {
  font-size: 30px;
  font-family: 'Times New Roman', Times, serif;
  font-weight: 700;
  color: #004d00;
}

td {
  font-size: 30px;
  font-family: 'Times New Roman', Times, serif;
  color: crimson;
  font-weight: 700;
  font-size: 30px;
  font-family: 'Times New Roman', Times, serif;
}

<h2>User Input Form</h2>


<h4>Enter your details first</h4>
<div id="container">

  <div id="nameDiv" class="input"><strong>Enter your name: </strong><input id="name" type="text" placeholder="First Last" required/></div>
  <br>
  <br>
  <div class="input"><strong>Enter your Email: </strong><input id="email" type="text" placeholder="YOURNAME@DOMAIN.COM" required/></div>
  <br>
  <br>
  <div class="input"><label for="Test Types" id="tst_type"><strong>Test Type: </strong></label>
    <select size="1" id="tst_type" name="TP">
      <option value=""> - Select - </option>
      <option value="Manufacturing">Manufacturing</option>
      <option value="Channel">Channel</option>
      <option value="DVT">DVT</option>
    </select>

  </div>

  <br>
  <br>
  <div class="input"><label for="Product Types" id="product_type"><strong>Product Type: </strong></label>
    <select size="1" id="product_type_select" name="PT">
      <option value=""> - Select - </option>
      <option value="RAID">RAID</option>
      <option value="RBOD">RBOD</option>
      <option value="EBOD">EBOD</option>
      <option value="iSCSI">iSCSI</option>
    </select>
  </div>


  <br>
  <br>
  <div class="input"><strong>IP Address: </strong><input id="txta_address" type="text" placeholder="10.10.10.10" required/></div>
  <br>
  <br>
  <div class="input"><label for="No_of_Inputs"><strong>Number of Chasis Input: </strong></label><input id="num_inputs" type="text" placeholder="1" required/></div>
  <br>
  <br>
  <button id="entry">Submit Information</button>

</div>
<script src="main.js"></script>

<table id="display">
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Test Type</th>
    <th>Product Type</th>
    <th>IP Address</th>
    <th>Chasis Inputs</th>
  </tr>

</table>

While building a mini app using JavaScript,HTML and CSS. I am getting 'undefined' value for the selected dropdown

1 Answers1