Establecer valor de entrada en jQuery

Usa el método val() de jQuery para establecer el valor de un campo de entrada, leer su valor actual o calcular uno nuevo a partir del anterior. Selecciona el campo que quieras y llama a .val("new value") para actualizarlo. Los ejemplos siguientes muestran cómo establecer y leer valores, usar la forma con una función de retorno y evitar errores habituales.

Establecer el valor de un campo de entrada con .val()

Llama a .val(value) sobre una selección de jQuery para asignar el valor a todos los elementos coincidentes. Por ejemplo, $("#email").val("reader@example.com") establece el valor del campo de entrada cuyo ID es email. Sustituye el selector y la cadena por los que utilice tu página. Un selector de clase como $(".email") puede coincidir con varios campos, así que úsalo solo si quieres establecer el valor de cada uno.

El elemento debe existir cuando se ejecute la llamada. Colócala en una función de inicialización, como $(function () { ... }), o carga el script después del marcado del formulario correspondiente. Si el selector no coincide con ningún elemento, no habrá nada que actualizar; si el valor parece no cambiar, comprueba el selector y el ID o la clase del elemento.

Usar una función de retorno para actualizar valores de campos de entrada

Pasa una función a .val() cuando el nuevo valor dependa del valor actual de cada campo. jQuery llama a la función para cada elemento coincidente y le proporciona como argumentos su posición, empezando por cero, y su valor actual. Devuelve el valor que quieras asignar: los argumentos se reciben en la función, pero no se devuelven automáticamente. Esto permite transformar varios campos sin tener que leer y establecer sus valores en pasos separados.

Por ejemplo, esta lógica de retorno convierte en mayúsculas el texto del valor actual. Es una ilustración independiente de la transformación en JavaScript; en una página, pasa la función a .val() sobre los campos seleccionados:

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

function uppercaseValue(index, currentValue) {
  return currentValue.toUpperCase();
}

const updatedValue = uppercaseValue(0, "delft");

Para conservar el comportamiento habitual de convertir el texto a mayúsculas al salir del campo, registra un controlador blur y usa dentro de él $(this).val(function (index, currentValue) { return currentValue.toUpperCase(); }). Cuando el usuario salga del campo, la cadena devuelta por la función reemplazará su valor. Puedes omitir el parámetro index si no lo necesitas.

Leer el valor de un campo de entrada con .val()

Llama a .val() sin argumentos para leer el valor del primer elemento de la selección. Por ejemplo, const email = $("#email").val(); guarda el valor actual para que tu código pueda comprobarlo o utilizarlo en otro lugar. Si un selector coincide con varios elementos, el método de lectura sigue devolviendo solo el valor del primero; usa una operación para cada elemento si necesitas leerlos todos.

El valor leído de un campo de entrada es una cadena. Conviértelo explícitamente si la lógica posterior necesita un número y ten en cuenta el texto que haya escrito el usuario. El método devuelve el valor actual del campo, que puede haber cambiado desde que se cargó la página.

Comprobaciones habituales al establecer valores de campos de entrada

• Confirma el selector: comprueba que el ID, la clase u otro selector coincida con el campo previsto. Si coincide con varios campos, se actualizarán todos.
• Comprueba el momento de ejecución: ejecuta el método para establecer el valor cuando el campo ya exista, por ejemplo, en una función de inicialización de jQuery o después de cargar el marcado del formulario.
• Comprueba el origen del valor: si usas una función de retorno, devuelve la cadena transformada. La función recibe primero el índice del elemento y después su valor actual.
• Gestiona los eventos por separado: establecer un valor con .val() no activa por sí solo un evento change. Si otro código debe responder a la actualización programática, activa explícitamente el evento necesario después de establecer el valor; por ejemplo, con .trigger("change").
• Distingue entre mostrar y enviar: .val() cambia el valor actual del control; no actualiza texto independiente de la página ni garantiza que el campo se incluya al enviar un formulario. Si importa el envío, comprueba que el campo esté habilitado y pertenezca al formulario.