Suppose you are making a registration form in which you are taking the phone numbers of users. Now, You want to ask the user for four alternative contact numbers. You want to make sure that all four contact numbers given by users should be different.
This functionality can be implemented in two ways :
- At the time of input before submitting the form: For this, we can use “oninput” event provided by HTML itself which triggers the function specified in javascript whenever input changes in input field
- After submitting the form: For this, we can use “onsubmit” or “onclick” event which is also provided by HTML and they work on Buttons. “onclick” event will work for buttons while “onsubmit” event will work for forms
The below examples illustrate both approaches:
Example 1: In this example, we will see the oninput approach to detect duplicate values.
HTML
<!DOCTYPE html><html lang="en">
<head>
<title>
detect the duplication of
values of input fields
</title>
</head>
<body>
Ph no1:
<input id="gfg_field0"
oninput="gfg_check_duplicates()" />
<div id="status0"></div>
<br />
Ph no2:
<input id="gfg_field1"
oninput="gfg_check_duplicates()" />
<div id="status1"></div>
<br />
Ph no3:
<input id="gfg_field2"
oninput="gfg_check_duplicates()" />
<div id="status2"></div>
<br />
Ph no4:
<input id="gfg_field3"
oninput="gfg_check_duplicates()" />
<div id="status3"></div>
<br />
<script>
function gfg_check_duplicates() {
let myarray = [];
for (i = 0; i < 4; i++) {
myarray[i] =
document.getElementById("gfg_field" + i).value;
}
for (i = 0; i < 4; i++) {
for (j = i + 1; j < 4; j++) {
if (i == j || myarray[i] == "" || myarray[j] == "")
continue;
if (myarray[i] == myarray[j]) {
document.getElementById("status" + i)
.innerHTML = "duplicated values!";
document.getElementById("status" + j)
.innerHTML = "duplicated values!";
}
}
}
}
</script>
</body>
</html>
|
Output:
Example 2: In this example, we will show which of the values are the same and works dynamically as we change input.
HTML
<!DOCTYPE html><html lang="en">
<head>
<title>
detect the duplication
of values of input fields
</title>
</head>
<body>
<label>Phone no. 1</label>
<input id="gfg_field0"
oninput="gfg_check_duplicates()" />
<div id="status0"></div>
<label>Phone no. 2</label>
<input id="gfg_field1"
oninput="gfg_check_duplicates()" />
<div id="status1"></div>
<label>Phone no. 3</label>
<input id="gfg_field2"
oninput="gfg_check_duplicates()" />
<div id="status2"></div>
<label>Phone no. 4</label>
<input id="gfg_field3"
oninput="gfg_check_duplicates()" />
<div id="status3"></div>
<script>
function gfg_check_duplicates() {
let myarray = [];
for (i = 0; i < 4; i++) {
document.getElementById("status" + i).innerHTML = "";
myarray[i] =
document.getElementById("gfg_field" + i).value;
}
for (i = 0; i < 4; i++) {
let flag = false;
for (j = 0; j < 4; j++) {
if (i == j || myarray[i] == "" || myarray[j] == "")
continue;
if (myarray[i] == myarray[j]) {
flag = true;
document.getElementById("status" + i)
.innerHTML +=
"<br>Its identical to the phone number " + (j + 1);
}
}
if (flag == false)
document.getElementById("status" + i)
.innerHTML = "";
}
}
</script>
</body>
</html>
|
Output:
Example 3: In this example, we will check for duplicates using the onclick HTML event.
HTML
<!DOCTYPE html><html lang="en">
<head>
<title>
detect the duplication of
values of input fields
</title>
</head>
<body>
<label>Phone no. 1</label>
<input id="gfg_field0" />
<div id="status0"></div>
<label>Phone no. 2</label>
<input id="gfg_field1" />
<div id="status1"></div>
<label>Phone no. 3</label>
<input id="gfg_field2" />
<div id="status2"></div>
<label>Phone no. 4</label>
<input id="gfg_field3" />
<div id="status3"></div>
<br>
<button type="submit"
onclick="gfg_check_duplicates()">
Check for Duplicates !
</button>
<script>
function gfg_check_duplicates() {
let myarray = [];
for (i = 0; i < 4; i++) {
document.getElementById("status" + i)
.innerHTML = "";
myarray[i] =
document.getElementById("gfg_field" + i)
.value;
}
for (i = 0; i < 4; i++) {
let flag = false;
for (j = 0; j < 4; j++) {
if (i == j || myarray[i] == "" || myarray[j] == "")
continue;
if (myarray[i] == myarray[j]) {
flag = true;
document.getElementById("status" + i)
.innerHTML +=
"<br>Its identical to the phone number " + (j + 1);
}
}
if (flag == false)
document.getElementById("status" + i)
.innerHTML = "";
}
}
</script>
</body>
</html>
|
Output: