CODEWITHSUNDEEP
javascript
Jeremy Stone
Jeremy Stone

Reputation: 350

Validating user input to prevent duplicate ID

I'm trying to create new "student" objects each time a user inputs User ID, first name, last name, and clicks a button. I think I've made it to that point so far, but I'm trying to make sure that multiple students with the same ID cannot be added. I thought that looping through with two different variables might be the best way to isolate potential duplicates, but the only time I see my alert message is when there are actually not any duplicates. Can anyone push me in the right direction with this?

Heres my code:

<form>
ID Number:<br>
<input type="text" id="idNumber">
<br>
First name:<br>
<input type="text" name="firstName" id="fName">
<br>
Last name:<br>
<input type="text" name="lastName" id="lName">
</form>
<br>
<button type ="submit" onclick="myFunction(list)">Submit</button>
<div id = "container">
<ul id="list"></ul>
</div>

<script>
function myFunction(list){

    var ids =[];
    var student = new Object();
    student.idNo = document.getElementById("idNumber").value;

    student.firstName = document.getElementById("fName").value;
    student.lastName = document.getElementById("lName").value;

    for(var i = 0; i < 10; i++){
        for(var j = 1; j < 10 ; i++){
        ids.push(student.idNo);
        if(ids[i] == ids[j]){
        alert("Id already exists");
        }
        }
    }

    var text = " "+student.idNo+" "+student.firstName+" "+student.lastName;

    var li = document.createElement("li");
    li.addEventListener("mouseover", mouseOver, false);
    //li.addEventListener("click", mouseClick, false);
    var node = document.createTextNode(text);
    li.appendChild(node);
    document.getElementById("list").appendChild(li);
}


</script>

Upvotes: 0

Views: 1119

Answers (1)

Weedoze
Weedoze

Reputation: 13943

Here is a working snippet. Your ìds was always set to empty array because it was inside your function

  var ids = [];

  function myFunction(list) {
    var student = new Object();
    student.idNo = document.getElementById("idNumber").value;
    student.firstName = document.getElementById("fName").value;
    student.lastName = document.getElementById("lName").value;

    if (ids.indexOf(student.idNo) == -1) {
      
      ids.push(student.idNo);
      var text = " " + student.idNo + " " + student.firstName + " " + student.lastName;
      var li = document.createElement("li");
      var node = document.createTextNode(text);
      li.appendChild(node);
      document.getElementById("list").appendChild(li);
      
    } else {
      
      alert("Duplicated ID");
      
    }


  }
<form>
  ID Number:
  <br>
  <input type="text" id="idNumber">
  <br>First name:
  <br>
  <input type="text" name="firstName" id="fName">
  <br>Last name:
  <br>
  <input type="text" name="lastName" id="lName">
</form>
<br>
<button type="submit" onclick="myFunction(list)">Submit</button>
<div id="container">
  <ul id="list"></ul>
</div>

Upvotes: 2

Related Questions