La modifica di jQuery .val non cambia il valore di input

103

Ho un input HTML con un collegamento nel valore.

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

Sto usando jQuery per modificare il valore su un determinato evento.

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

Il codice precedente modifica il valore della casella di testo ma non cambia il valore nel codice (valore = "http://www.link.com" rimane invariato). Ho bisogno che anche il valore = '' cambi.

javascript jquery

— Lukas
fonte

Cosa intendi con in the code? Stai guardando la fonte originale (quindi non modificata) della pagina?

— Frédéric Hamidi

Utilizzo dell'elemento inspect di Chrome.

— Lukas

3

@Luke Il valore cambierà, ma il valore visibile dell'elemento HTML nell'ispettore di Chrome no. Prova quindi ad avvisare il valore o a inviarlo alla console e vedrai che è cambiato. Vedi, è cambiato: jsfiddle.net/a8SxF

— TheZ

Sì, ora lo vedo. Sto usando zClip per copiare il valore negli appunti ma sta copiando il vecchio valore dopo che è stato modificato. Penso di poterlo risolvere con un po 'di scherzi.

— Lukas

1

possibile duplicato del metodo html () sbagliato quando il valore di input è cambiato

— Esailija

177

Usa attrinvece.
$('#link').attr('value', 'new value');

demo

— Ricardo Alvaro Lohmann
fonte

6

Questo è totalmente corretto, usando setAttributeo jQuery attrinfluenzerai anche il valore dell'elemento DOM: jsfiddle.net/a8SxF/1

— TheZ

4

@TheZ è perché il flag del valore sporco dell'input è falso. Prova a interagire con l'input (il valore è sporco dopo l'input dell'utente) e quindi setAttribute

— Esailija

5

Ma quando vuoi ottenere html con .html(), allora ci sarà sempre lo stesso vecchio valore, non importa, se usi .val('new value')o attr('value', 'new value')... :(

— Legionar

6

Ha codificato un mucchio enorme e complicato di funzioni usando .val (come suggerito da tutto ciò che ho letto in precedenza) e ha avuto lo stesso identico problema. Maledettamente fastidioso! Questa risposta dovrebbe essere il primo punto di riferimento per tutti i neofiti di jQuery che cercano di aggiornare dinamicamente gli elementi del modulo. Mi avrebbe risparmiato un bel po 'di ore se avessi letto prima questo!

— Concessione

2

Questo è il motivo per cui è così difficile partire con JavaScript / JQuery, così tanti avvertimenti come questo. Questo mi ha aiutato molto. Grazie!

— eaglei22

13

La modifica della proprietà value non modifica il file defaultValue. Nel codice (recuperato con .html()o innerHTML) l'attributo value conterrà la defaultValue, non la proprietà value.

— Kevin B
fonte

1

Questo lo spiega. La digitazione inoltre non cambia il <input id = 'a' value> ma influisce sul risultato di $ ("# a"). Val (). Una domanda solo per essere sicuri: $ ("# a"). Val (value) è davvero il modo corretto di cambiare il valore di un elemento di input, in modo che venga inviato il valore giusto?

— Daniel Katz,

1

Si, è corretto. la modifica dell'attributo non cambierà ciò che viene inviato.

— Kevin B

8

per espandere un po 'la risposta di Ricardo: https://stackoverflow.com/a/11873775/7672426

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

su val ()

L'impostazione dei valori utilizzando questo metodo (o utilizzando la proprietà del valore nativo) non causa l'invio dell'evento di modifica. Per questo motivo, i gestori di eventi rilevanti non verranno eseguiti. Se vuoi eseguirli, dovresti chiamare .trigger ("change") dopo aver impostato il valore.

— Landan Jackson
fonte

2

Questo è solo un possibile scenario accaduto a me. Bene, se aiuta qualcuno, allora fantastico: ho scritto un'app complicata che da qualche parte lungo il codice ho usato una funzione per cancellare tutti i valori delle caselle di testo prima di mostrarli. Qualche tempo dopo ho provato a impostare un valore di casella di testo utilizzando jquery val ('value') ma non ho notato che subito dopo ho invocato il metodo ClearAllInputs .. quindi, potrebbe anche accadere.

— amira
fonte

0

Il mio problema simile era causato dalla presenza di caratteri speciali (ad esempio punti) nel selettore.

La soluzione era di sfuggire ai caratteri speciali:

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

— WiredIn
fonte

D'accordo, molto male, non dovresti scappare, dovresti rinominare l'ID del tuo 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
fonte

1

Sì, questo non aggiorna il valore effettivo però. Aggiorna la casella di testo sullo schermo, ma quando si tenta di inviare un modulo il valore è quello che era quando la pagina è stata originariamente caricata.

— Concessione

-1

Per me il problema era che la modifica del valore per questo campo non funzionava:

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

Nessuna delle soluzioni sopra ha funzionato per me, quindi ho indagato ulteriormente e ho trovato:

Secondo la specifica dell'evento di livello 2 DOM: l'evento di modifica si verifica quando un controllo perde il focus di input e il suo valore è stato modificato da quando ha ottenuto il focus. Ciò significa che l'evento di modifica è progettato per attivarsi al cambiamento tramite l'interazione dell'utente. Le modifiche programmatiche non provocano l'attivazione di questo evento.

La soluzione era aggiungere la funzione trigger e far sì che attivasse l'evento di modifica in questo modo:

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

— Ivan Jancic
fonte

-2

Ricontrolla più di un elemento con ID non univoco! Questa era la mia situazione con il ciclo foreach e la duplicazione dei miei ID.

— Stefan Pavlov
fonte