Supongamos que está realizando un formulario de registro en el que está tomando los números de teléfono de los usuarios. Ahora, desea pedirle al usuario cuatro números de contacto alternativos. Desea asegurarse de que los cuatro números de contacto proporcionados por los usuarios sean diferentes.
Esta funcionalidad se puede implementar de dos maneras:
- En el momento de la entrada antes de enviar el formulario: para esto, podemos usar el evento «oninput» proporcionado por HTML mismo que activa la función especificada en javascript cada vez que la entrada cambia en el campo de entrada
- Después de enviar el formulario: para esto, podemos usar el evento «onsubmit» o «onclick», que también es proporcionado por HTML y funcionan en los botones. El evento «onclick» funcionará para los botones, mientras que el evento «onsubmit» funcionará para los formularios
Los siguientes ejemplos ilustran ambos enfoques:
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<script>
function gfg_check_duplicates() {
var 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>
</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 />
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, mostraremos cuáles de los valores son iguales y funcionan dinámicamente a medida que cambiamos la entrada.
HTML
<!DOCTYPE html>
<html>
<head>
<script>
function gfg_check_duplicates() {
var 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++) {
var 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>
</head>
<body>
<h4>Phone no. 1</h4>
<input id="gfg_field0"
oninput="gfg_check_duplicates()" />
<div id="status0"></div>
<h4>Phone no. 2</h4>
<input id="gfg_field1"
oninput="gfg_check_duplicates()" />
<div id="status1"></div>
<h4>Phone no. 3</h4>
<input id="gfg_field2"
oninput="gfg_check_duplicates()" />
<div id="status2"></div>
<h4>Phone no. 4</h4>
<input id="gfg_field3"
oninput="gfg_check_duplicates()" />
<div id="status3"></div>
<br />
</body>
</html>
Producción:
HTML
<!DOCTYPE html>
<html>
<head>
<script>
function gfg_check_duplicates() {
var 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++) {
var 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>
</head>
<body>
<h4>Phone no. 1</h4>
<input id="gfg_field0" />
<div id="status0"></div>
<h4>Phone no. 2</h4>
<input id="gfg_field1" />
<div id="status1"></div>
<h4>Phone no. 3</h4>
<input id="gfg_field2" />
<div id="status2"></div>
<h4>Phone no. 4</h4>
<input id="gfg_field3" />
<div id="status3"></div>
<br>
<button type="submit" onclick="gfg_check_duplicates()">
Check for Duplicates !
</button>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por Shubhamkirve y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA