Attempting to prevent the insertion of duplicate values more than once

Question

Attempting to prevent the insertion of duplicate values more than once

Is there a way to prevent duplicate values from being submitted in my simple site? Currently, I have implemented a function that allows users to input a name and a mark. However, if the same values (name & mark) are entered, I want to notify the user and prevent them from submitting the data again.

function add() {
  name.push(nameInput.value);
  mark.push(markInput.value);

  if (name == "" && mark == "") {
    document.getElementById("result").innerHTML = "No name or mark Has Been Entered. Please Try Again!";
  } else if (name && mark) {
    document.getElementById("result").innerHTML = "Name & Mark has successfully been entered!";
    console.log(name, mark);
  } else if (name == mark) {
    var n = name.includes("Ross", 0);
    //console.log(name, mark);//
  }
}

document.getElementById("Add").addEventListener("click", insert);

javascript arrays duplicates

Answer 1

Answer №1

For optimal performance, it is recommended to move the lines name.push(nameInput.value); and mark.push(markInput.value); to a block that fulfills certain criteria for insertion. In this case, the values should not be empty and they must be unique.

if (!name  && !mark ) {
    document.getElementById("result").innerHTML = "No name or mark Has Been Entered. Please Try Again!";
  }
else if (names.includes(nameInput.value) && mark.includes(markInput.value)) {
    document.getElementById("result").innerHTML = "Name & Mark are same please enter again!";
  }
  else{
      names.push(nameInput.value);
      marks.push(markInput.value);
      document.getElementById("result").innerHTML ="Name & Mark has successfully been entered!"
  }

An alternative approach would be to use an object to achieve the same functionality. Create an object with the properties 'name' and 'mark'

 let person = {name: name.value,mark: mark.value };

and then push this object into the arr.

To check for duplicate submissions of the same name and mark, utilize arr.find().

let name = document.getElementById("name");
let mark = document.getElementById("mark");
let arr = [];
const add = () => {
  if (!name.value || !mark.value) {
    alert("Please enter the value in both fields");
    return;
  }
  let person = {
    name: name.value,
    mark: mark.value
  };
  if (arr.find(personIn => personIn.name == person.name && personIn.mark == person.mark)) {
    alert("Please dont repeat the values");
    return;
  }
  arr.push(person);
}
document.getElementById("submit").addEventListener('click', add);

Name:<input type="text" id="name" /><br> Mark:
<input type="text" id="mark" /><br>
<button id="submit">Submit</button>

Answer 2

For optimal performance, it is recommended to move the lines name.push(nameInput.value); and mark.push(markInput.value); to a block that fulfills certain criteria for insertion. In this case, the values should not be empty and they must be unique.

if (!name  && !mark ) {
    document.getElementById("result").innerHTML = "No name or mark Has Been Entered. Please Try Again!";
  }
else if (names.includes(nameInput.value) && mark.includes(markInput.value)) {
    document.getElementById("result").innerHTML = "Name & Mark are same please enter again!";
  }
  else{
      names.push(nameInput.value);
      marks.push(markInput.value);
      document.getElementById("result").innerHTML ="Name & Mark has successfully been entered!"
  }

An alternative approach would be to use an object to achieve the same functionality. Create an object with the properties 'name' and 'mark'

 let person = {name: name.value,mark: mark.value };

and then push this object into the arr.

To check for duplicate submissions of the same name and mark, utilize arr.find().

let name = document.getElementById("name");
let mark = document.getElementById("mark");
let arr = [];
const add = () => {
  if (!name.value || !mark.value) {
    alert("Please enter the value in both fields");
    return;
  }
  let person = {
    name: name.value,
    mark: mark.value
  };
  if (arr.find(personIn => personIn.name == person.name && personIn.mark == person.mark)) {
    alert("Please dont repeat the values");
    return;
  }
  arr.push(person);
}
document.getElementById("submit").addEventListener('click', add);

Name:<input type="text" id="name" /><br> Mark:
<input type="text" id="mark" /><br>
<button id="submit">Submit</button>

Attempting to prevent the insertion of duplicate values more than once

Answer №1

Similar questions

Cookie set upon clicking a particular element exclusively

Create a specialized angular controller

Geocomplete Plugin without Google Branding

Contrast: Colon vs. Not Equal Sign (Typescript)

`Vanilla JavaScript AJAX request without using any external libraries or

Assign value to an element in an array using the value from another element

Setting up a React Package by reinstalling a git repository

"The authentication scheme is unrecognized" - this is the message produced by Node-LinkedIn module

Exploring the magic of the (!!!) operator in JavaScript!

Track and manage date ranges inclusive of specific times

Checking the dimensions and information of a JSON collection - a step-by-step guide

How can we develop a NodeJS function that returns a query result using a callback method?

How to retrieve a DOM element using Aurelia framework

iOS - A clever trick for manually setting focus on an input/textarea

Mock asynchronous calls in a React component using Jest

What could be the reason behind Cesium viewer's failure to show a model after I upload it?

Turn off automatic zooming for mobile device input

Using JavaScript to implement scrolling functionality for an ASP.NET dropdownlist

Transitioning the <mat-icon> from one <mat-form-field> to another may not always result in the icon being updated consistently

Restoring the position of the <Rect/> element after dragging in a React + Konva application