(Este artículo requiere un conocimiento previo de HTML, CSS y JavaScript).
Es posible que haya notado que a veces los sitios web como el comercio electrónico o algún sitio web del gobierno tienen dos campos de dirección en sus formularios. Uno para la dirección principal y otro para la dirección secundaria (o uno para la dirección de facturación y otro para la dirección de envío, etc.).
La mayoría de las veces las personas tienen las mismas direcciones primaria y secundaria y para ahorrarnos el tedioso trabajo de volver a ingresar los mismos datos, tienen algún tipo de opción para copiar automáticamente el contenido de un campo en otro.
Vamos a ver cómo hacer este tipo de formulario de Autocompletar usando JavaScript.
En el formulario que vamos a discutir, hay una casilla de verificación y cada vez que se marca, el código copia automáticamente los valores de la dirección principal y el código postal principal a la dirección secundaria y el código postal secundario, respectivamente. Si la casilla de verificación no está marcada, estos campos quedarán en blanco.
Aquí está el código simple para este tipo de formulario:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Form Auto Fill</title>
<style>
fieldset {
margin-bottom: 5%;
}
</style>
</head>
<body>
<h1>AutoFill Form</h1>
<form>
//Fields for primary address
<fieldset>
<legend><b>Primary Address</b>
</legend>
<label for="primaryaddress">
Address:</label>
<input type="text"
name="Address"
id="primaryaddress"
required /><br />
<label for="primaryzip">Zip code:</label>
<input type="text"
name="Zip code"
id="primaryzip"
pattern="[0-9]{6}"
required /><br />
</fieldset>
<input type="checkbox"
id="same"
name="same"
onchange="addressFunction()" />
<label for="same">
If same secondary address select this box.
</label>
// Fields for secondary address
<fieldset>
<legend><b>Secondary Address</b></legend>
<label for="secondaryaddress">
Address:
</label>
<input type="text"
name="Address"
id="secondaryaddress"
required /><br />
<label for="secondaryzip">
Zip code:</label>
<input type="text"
name="Zip code"
id="secondaryzip"
pattern="[0-9]{6}"
required /><br />
</fieldset>
// Submit button in the form
<input type="submit"
value="Submit" />
</form>
// JavaScript Code
<script>
function addressFunction() {
if (document.getElementById(
"same").checked) {
document.getElementById(
"secondaryaddress").value =
document.getElementById(
"primaryaddress").value;
document.getElementById(
"secondaryzip").value =
document.getElementById(
"primaryzip").value;
} else {
document.getElementById(
"secondaryaddress").value = "";
document.getElementById(
"secondaryzip").value = "";
}
}
</script>
</body>
</html>
#Así es como se verá el formulario antes de marcar la casilla:
#Y así es como se verá después de marcar la casilla: 
Nota: funciones como
- ‘obligatorio’ (líneas 18, 20, 29, 31): garantiza que el formulario solo se enviará si estos campos no están vacíos;
- ‘patrón = “[0-9]{6}”'(línea 20, 31) – asegura que el formato del código postal sea correcto, es decir, un código postal de seis dígitos.
Explicación:
cuando se cambia el estado marcado de la casilla de verificación, se producirá el evento ‘onchange’ (ver línea 23) que llamará a ‘addressFunction()’.
Si la casilla está marcada, los valores de la dirección principal y el código postal principal se copiarán en la dirección secundaria y el código postal secundario (al usar la función ‘getElementById()’ nos referimos a un elemento de Id particular y ‘.value’ para acceder al valor en ese elemento de Id en particular).
De lo contrario, estos campos permanecerán en blanco para que pueda ser llenado por el usuario (en caso de direcciones primarias y secundarias diferentes).
Publicación traducida automáticamente
Artículo escrito por sanjal_katiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA