title: How to check the table whether the same roll number exists or not using javascript
body: <ol>
  <li><p>Can we can check the roll number already exists or not.</p>
  
  <p>with javascript</p></li>
  <li><p>can we validate this</p></li>
  <li><p>Showing with a alert message that the roll number exists if it is
  already in the table</p></li>
  </ol>
  
  <p>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>window.onload = function() {
         document.getElementById('new').style.display = 'none';
       };
       function addtable(){
      document.getElementById('new').style.display = 'block';
         Rollno = document.getElementById("roll_number");
         Name = document.getElementById("student_name");
         Class = document.getElementById("class");
         var Gender = null;
           var inputElements = document.getElementsByClassName('gender');
           for (var i = 0; inputElements[i]; ++i) {
               if(inputElements[i].checked){
                Gender = inputElements[i].value;
                break;
              }
           };
           Age = document.getElementById("age");
           Phone = document.getElementById("phone_number");
           var Result = null; 
        var inputElements = document.getElementsByClassName('result');
        for(var i=0; inputElements[i]; ++i){
          if(inputElements[i].checked){
              Result = inputElements[i].value;
              break;
          }
        };
      var table = document.getElementById("new");
      rowCount = table.rows.length;
      row = table.insertRow(rowCount);
  
      row.insertCell(0).innerHTML= Rollno.value;
      row.insertCell(1).innerHTML= Name.value;
      row.insertCell(2).innerHTML= Class.value;
      row.insertCell(3).innerHTML= Gender;
      row.insertCell(4).innerHTML= Age.value;
      row.insertCell(5).innerHTML= Phone.value;
      row.insertCell(6).innerHTML= Result;
      row.insertCell(7).innerHTML='&lt;input type="submit" value = "Delete" onclick="deleteRow(this)"&gt;';
  
     
      var roll = document.forms["student_detail"]["roll_number"].value;
      if (roll == "") {
          alert("Rollno must be filled out");
          return false;
      }
      var name = document.forms["student_detail"]["student_name"].value;
      if (name == ""){
          alert("Name must be filled out");
          return false;
      }
      var clas = document.forms["student_detail"]["class"].value;
      if (clas == "") {
          alert("select the class");
          return false;
      }
      var age = document.forms["student_detail"]["age"].value;
      if (age == ""){
          alert("Age must be filled out");
          return false;
      }
      var phone = document.forms["student_detail"]["phone_number"].value;
      if (phone == "") {
          alert("Phone number must be filled out");
          return false;
      }
      if (document.student_detail.result1.checked == true &amp;&amp; document.student_detail.result2.checked == true){
          alert('Select any one result');
          return false ;
       }
  
      }
  
      function deleteRow(obj) {
        
      var index = obj.parentNode.parentNode.rowIndex;
      var table = document.getElementById("new");
      table.deleteRow(index);
      
      }
      function myFunction() {
        var x = document.getElementById('myTable');
        if (x.style.display === 'none') {
          x.style.display = 'block';
        } else {
          x.style.display = 'none';
        }
        var change = document.getElementById("toggle");
        if (change.innerHTML === "Hide Form")
        {
          change.innerHTML = "Show Form";
        }
        else {
          change.innerHTML = "Hide Form";
        }
      }
      function hideElem(){
      document.getElementById('new').style.visibility = "hidden";
      }
      function showElem(){
      document.getElementById('new').style.visibility = "visible";
      }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.abc table{
        width: 100%;
        border-collapse: collapse;
      }
      .abc table th{
          border: 1px solid #000;
      }
      .abc table td{
          border: 1px solid #000;
      }
      h2{
      color: black;
      text-shadow: 2px 2px 8px #FF0000
      }    
      input[type=text],select,input[type=number]{
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      display: inline-block;
      border: 2px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
      }
      input[type=button] {
      width: 50%;
      background-color: #4CAF50;
      color: white;
      padding: 14px 10px;
      margin: 8px 0;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      }
  
      input[type=button]:hover {
      background-color: #45a049;
      }
  
      div {
       border-radius: 5px;
       background-color: #f2f2f2;
       padding: 20px;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> 
       
      
      &lt;form name="student_detail" method="post" action="#" onsubmit="return addtable();"&gt;
      &lt;table id="myTable" &gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;h2&gt;School Management Application&lt;/h2&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;label for="roll_number"&gt;Roll no&lt;/label&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" id="roll_number" name="roll_number" placeholder="Roll Number"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;label for="student_name"&gt;Student name&lt;/label&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" id="student_name" name="student_name" placeholder="Student Name"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;label for="class"&gt;Class&lt;/label&gt;&lt;/td&gt;
              &lt;td&gt;&lt;select name="class" id="class"&gt;
                  &lt;option value="1"&gt;1&lt;/option&gt;
                  &lt;option value="2"&gt;2&lt;/option&gt;
                  &lt;option value="3"&gt;3&lt;/option&gt;
                  &lt;option value="4"&gt;4&lt;/option&gt;
                  &lt;option value="5"&gt;5&lt;/option&gt;
                  &lt;option value="6"&gt;6&lt;/option&gt;
                  &lt;option value="7"&gt;7&lt;/option&gt;
                  &lt;option value="8"&gt;8&lt;/option&gt;
                  &lt;option value="9"&gt;9&lt;/option&gt;
                  &lt;option value="10"&gt;10&lt;/option&gt;
              &lt;/select&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;label&gt;Gender&lt;/label&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" class="gender" name="gender" value="male"&gt;Male
              &lt;input type="radio" class="gender" name="gender" value="female"&gt;Female&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;label for="age"&gt;Age&lt;/label&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="number" id="age" name="age" placeholder="Age"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;label for="phone_number"&gt;Phone number&lt;/label&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" id="phone_number" name="phone_number" placeholder="Phone Number"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;label&gt;Result&lt;/label&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="checkbox" class="result" name="result1" value="passed" &gt;Passed
              &lt;input type="checkbox" class="result" name="result2" value="failed" /&gt;Failed&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;input type="button" value="Submit" onclick="addtable()"&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
      &lt;/form&gt;
       &lt;table&gt;
          &lt;tr&gt;
          &lt;td&gt;&lt;input type="button" value="Hide Form" id="toggle" onclick="myFunction()"&gt;
              &lt;input type="button" value="Hide table" id="tab" onclick="hideElem()"&gt;
              &lt;input type="button" value="Show table" id="tab1" onclick="showElem()"&gt;&lt;/td&gt;
          &lt;/tr&gt;
       &lt;/table&gt;
  
      &lt;div class="abc"&gt;
       &lt;table id="new"&gt;
            &lt;tr&gt;
            &lt;th&gt;Rollno&lt;/th&gt;
         &lt;th&gt;Student name&lt;/th&gt;
         &lt;th&gt;Class&lt;/th&gt;
         &lt;th&gt;Gender&lt;/th&gt;
         &lt;th&gt;Age&lt;/th&gt;
         &lt;th&gt;Phone number&lt;/th&gt; 
         &lt;th&gt;Result&lt;/th&gt;
         &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
     </code></pre>
  </div>
  </div>
  </p>
  
  <ul>
  <li><p>Need to get alert if the same roll number enters again.After
  submiting  And a alert message to be shown</p>
  
  <p>Can any one help me to do this</p></li>
  </ul>