Cómo rellenar los campos de texto de las variables de URL

Muchos sitios web de negocios utilizan formularios para capturar datos de usuarios. Estos formularios utilizan el marcado HTML y, opcionalmente, funciones de JavaScript. Su sitio web puede usar variables de URL, que le permiten pasar elementos de datos como parte de la URL de una página en particular. Si la dirección de una página contiene variables de URL, puede usar JavaScript para obtener los valores de estas variables. Una vez que los tenga dentro de su script, puede establecer estas variables como los valores de los campos de texto, llenando su formulario con los elementos de datos pasados.

1.

Crea tus campos de entrada de texto. Para establecer el valor de sus campos de texto, debe poder identificarlos en el código JavaScript. Use el siguiente esquema dentro del área de formulario en su página:

Este código incluye un valor de atributo de ID, que le permitirá identificar el elemento en el script.

2.

Llame a una función de JavaScript. Creará una función para rellenar el campo de texto con variables de URL. Para indicar al navegador que ejecute esta función cuando se carga la página, extienda la etiqueta de cuerpo HTML de apertura de su página de la siguiente manera:

Cuando se carga la página, el navegador ejecutará la función llamada "rellenar", que creará a continuación.

3.

Crear una función. En la sección de encabezado de su página, agregue un área de script con el esquema de la función especificada dentro de la siguiente manera:

El código para obtener las variables de URL y rellenarlas en los campos de texto aparecerá entre los corchetes de la función de apertura y cierre.

4.

Recuperar las variables de URL. Dentro de la función de JavaScript, agregue la siguiente línea de código inicial para recuperar la parte de la URL con las variables en ella:

var varSection = window.location.search.substr (1);

Esto recupera la parte de la URL después de "?" Carácter que comienza la sección de consulta. La URL puede contener múltiples variables, separadas por el carácter "&", así que divida la cadena de consulta en pares de variables de valor clave de la siguiente manera:

var varArray = varSection.split ("&");

5.

Recuperar las variables como pares de valores clave. Su código tiene una matriz de las variables de URL, ahora necesita identificar la que desea. Use un bucle "para" de la siguiente manera:

para (var v = 0; v

}

Este código recorre las variables de la matriz. Cada variable aparece en la URL como un par, con la clave seguida por el valor, con un signo igual entre ellos como en el siguiente ejemplo:

info = hola

6.

Recupera la variable que necesitas. Aún dentro de tu ciclo "para", agrega una prueba condicional de la siguiente manera:

if (keyValueArray [0] == "info") {varValue = keyValueArray [1]; document.getElementById ("txt1"). value = varValue; descanso; }

Este código busca una variable con "información" como su clave. Cuando el bucle encuentra la variable en cuestión, establece el valor del campo de texto con este valor, y luego sale del bucle. Esto funcionaría con una URL con la siguiente estructura de muestra:

//tuyo.com/espanol.html?info=hello&data=goodbye

Guarda tu página y pruébala en un navegador.

Propina

  • Si su variable de URL tiene un nombre diferente, modifique la sección de "información" de su código de función para que coincida.

Advertencia

  • Las variables de URL solo son adecuadas para valores de datos pequeños.