jQuery .val change no cambia el valor de entrada

103

Tengo una entrada HTML con un enlace en el valor.

<input type = 'text' value = 'http://www.link.com' id = 'link' />

Estoy usando jQuery para cambiar el valor en un evento determinado.

$('#link').val('new value');

El código anterior cambia el valor del cuadro de texto pero no cambia el valor en el código (value = 'http://www.link.com' permanece sin cambios). Necesito que el valor = '' cambie también.

javascript jquery

— Lukas
fuente

¿Qué quieres decir con in the code? ¿Está mirando la fuente original (por lo tanto, sin modificar) de la página?

— Frédéric Hamidi

Usando el elemento de inspección de Chrome.

— Lukas

3

@Luke El valor cambiará, pero el valor visible del elemento HTML en el inspector de Chrome no. Intente luego alertar el valor o enviarlo a la consola y verá que ha cambiado. Mira, ha cambiado: jsfiddle.net/a8SxF

— TheZ

Sí, lo veo ahora. Estoy usando zClip para copiar el valor en el portapapeles, pero está copiando el valor anterior después de que ha cambiado. Creo que puedo arreglarlo con un poco de lío.

— Lukas

1

posible duplicado del método html () incorrecto cuando el valor de entrada ha cambiado

— Esailija

177

Úselo en su attrlugar.
$('#link').attr('value', 'new value');

manifestación

— Ricardo Alvaro Lohmann
fuente

6

Esto es totalmente correcto, al usar setAttributeo jQuery attrtambién afectará el valor del elemento DOM: jsfiddle.net/a8SxF/1

— TheZ

4

@TheZ eso se debe a que el indicador de valor sucio de la entrada es falso. Intente interactuar con la entrada (el valor está sucio después de la entrada del usuario) y luego configureAttribute

— Esailija

5

Pero cuando quieras obtener html con .html(), seguirá habiendo el mismo valor anterior, no importa, si usas .val('new value')o attr('value', 'new value')... :(

— Legionar

6

Codifiqué un montón de funciones masivas y complicadas usando .val (como lo sugiere todo lo que leí anteriormente) y tuve exactamente el mismo problema. ¡Maldita sea! Esta respuesta debería ser el primer punto de llamada para cualquier novato de jQuery que busque actualizar los elementos del formulario de forma dinámica. ¡Me habría ahorrado unas buenas horas si hubiera leído esto primero!

— Grant

2

Es por eso que es tan difícil comenzar a ejecutar con JavaScript / JQuery, tantas advertencias como esta. Esto me ayudó mucho. ¡Gracias!

— eaglei22

13

Cambiar la propiedad del valor no cambia el defaultValue. En el código (recuperado con .html()o innerHTML), el atributo de valor contendrá la defaultValuepropiedad, no la del valor.

— Kevin B
fuente

1

Eso lo explica. Escribir tampoco cambia el <input id = 'a' value> pero sí afecta el resultado de $ ("# a"). Val (). Una pregunta para estar seguro: ¿Es $ ("# a"). Val (valor) realmente la forma correcta de cambiar el valor de un elemento de entrada, de modo que se envíe el valor correcto?

— Daniel Katz

1

Si, eso es correcto. cambiar el atributo no cambiará lo que se envía.

— Kevin B

8

para ampliar un poco la respuesta de Ricardo: https://stackoverflow.com/a/11873775/7672426

http://api.jquery.com/val/#val2

acerca de val ()

Establecer valores usando este método (o usando la propiedad de valor nativo) no causa el envío del evento de cambio. Por esta razón, no se ejecutarán los controladores de eventos relevantes. Si desea ejecutarlos, debe llamar a .trigger ("cambiar") después de establecer el valor.

— Landan Jackson
fuente

2

Este es solo un escenario posible que me sucedió. Bueno, si ayuda a alguien, entonces genial: escribí una aplicación complicada que en algún lugar del código usé una función para borrar todos los valores de los cuadros de texto antes de mostrarlos. Algún tiempo después traté de establecer un valor de cuadro de texto usando jquery val ('valor') pero no me di cuenta de que justo después de eso invoqué el método ClearAllInputs ... así que esto también podría suceder.

— amira
fuente

0

Mi problema similar fue causado por tener caracteres especiales (por ejemplo, puntos) en el selector.

La solución fue escapar de los caracteres especiales:

$("#dots\\.er\\.bad").val("mmmk");

— WiredIn
fuente

De acuerdo, muy mal, no deberías escapar, deberías cambiar el nombre de la identificación de tu elemento.

— webaholik

-1

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
function changes() {
$('#link').val('new value');
}
</script>
<button onclick="changes()">a</button>
<input type='text' value='http://www.link.com' id='link'>

— ikerya
fuente

1

Sí, esto no actualiza el valor real. Actualiza el cuadro de texto en pantalla, pero cuando intenta enviar un formulario, el valor es el que tenía cuando se cargó la página originalmente.

— Grant

-1

Para mí, el problema fue que cambiar el valor de este campo no funcionó:

$('#cardNumber').val(maskNumber);

Ninguna de las soluciones anteriores funcionó para mí, así que investigué más y encontré:

De acuerdo con la Especificación de Evento de Nivel 2 del DOM: El evento de cambio ocurre cuando un control pierde el foco de entrada y su valor ha sido modificado desde que ganó el foco. Eso significa que el evento de cambio está diseñado para activar el cambio mediante la interacción del usuario. Los cambios programáticos no hacen que se active este evento.

La solución fue agregar la función de disparo y hacer que desencadenara un evento de cambio como este:

$('#cardNumber').val(maskNumber).trigger('change');

— Ivan Jancic
fuente

-2

¡Verifique más de un elemento con una identificación no única! Esa era mi situación con foreach loop y duplicación de mi identificación.

— Stefan Pavlov
fuente