Impostare il valore del campo nascosto in un modulo usando ".val ()" di jQuery non funziona

188

Ho cercato di impostare il valore di un campo nascosto in un modulo utilizzando jQuery, ma senza successo.

Ecco un codice di esempio che spiega il problema. Se mantengo il tipo di input su "testo", funziona senza problemi. Ma, cambiando il tipo di input in "nascosto", non funziona!

<html>

    <head>
        <script type="text/javascript" src="jquery.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("button").click(function() {
                    $("input:text#texens").val("tinkumaster");
                });
            });
        </script>
    </head>

    <body>
        <p>
            Name:
            <input type="hidden" id="texens" name="user" value="texens" />
        </p>
        <button>
            Change value for the text field
        </button>
    </body>

</html>

Ho anche provato la seguente soluzione alternativa, impostando il tipo di input su "testo" e quindi utilizzando uno stile "display: none" per la casella di input. Ma anche questo fallisce! Sembra che jQuery abbia qualche problema nell'impostare campi di input nascosti o invisibili.

Qualche idea? C'è una soluzione alternativa per questo che funziona davvero?

jquery set hidden-fields

— texens
fonte

316

:textfallirà per un input con un valore di tipo di hidden. È anche molto più efficiente usare:

$("#texens").val("tinkumaster");

Gli attributi ID dovrebbero essere univoci su una pagina Web, assicurati che siano i tuoi in quanto ciò potrebbe contribuire a qualsiasi problema tu stia riscontrando, e specificare un selettore più complicato rallenta le cose e non sembra pulito.

Esempio su http://jsbin.com/elovo/edit , usando il codice di esempio su http://jsbin.com/elovo/2/edit

— Andy E
fonte

Andy, grazie per la rapida risposta. In realtà ho provato prima con "#texens" e poi con "#input: hidden # texens" e nessuno dei due sembrava funzionare. Quando ho cambiato il tipo di input nel modulo da "nascosto" a "testo" e "#input: nascosto: texens" a "#input: text: texens", ha funzionato senza problemi. "#Input: text # texens" era un errore di battitura sopra, e avrebbe dovuto essere "#input: hidden # texens" o semplicemente "#texens" come hai appena accennato. Quindi, sembra che i valori del campo nascosto non vengano modificati.

— texens,

1

@texens: sospetto che il problema risieda altrove. Come puoi vedere dall'esempio a cui mi sono collegato, val()funziona perfettamente sull'input nascosto, cambiando il valore da "non modificato" a "cambiato". Ho rivisto l'esempio per includere il codice incollato sopra, con un avviso per confermare la modifica del valore: jsbin.com/elovo/2/edit

— Andy E

Andy, grazie mille per l'esempio. Ho eseguito il codice sopra menzionato e funziona esattamente come dovrebbe essere. E l'avviso in effetti conferma che il valore è stato modificato. Stavo aprendo l'origine della pagina utilizzando la funzione "Visualizza origine pagina" di Firefox. E nella sorgente della pagina, mostra ancora il vecchio valore e non il nuovo valore (anche per il codice nel pastebin menzionato sopra). Tuttavia, la casella di avviso conferma il valore modificato. Quindi, suppongo che questo sia un problema di Firefox (o sono troppo stupido e trascuro qualcosa di importante?). Ancora una volta, grazie per il tuo tempo :)

— texens

2

@texens: nessun problema. Suggerirei di utilizzare uno strumento di debug adeguato, Firebug se usi Firefox, invece di visualizzare la fonte. Il comportamento di "visualizza sorgente" è più o meno lo stesso in tutti i browser e mostrerà il codice sorgente scaricato e non modificato della pagina.

— Andy E

2

Non penso che il problema sia con Firefox o uno strumento specifico tanto quanto lo è con il modo in cui il rendering e la visualizzazione dell'HTML modificato. Ho la stessa situazione dell'OP, tranne per il fatto che è coinvolto un po 'più di jQuery. Nel mio caso, come in questo, il codice funziona correttamente - l'evento click aggiorna correttamente un input di tipo "nascosto" - ma Firebug non mostra i valori aggiornati per i campi nascosti, anche se sono stati aggiornati e jQuery può accedervi e anche se i valori aggiornati per i campi visibili vengono visualizzati correttamente in Firebug.

— Dave DuPlantis,

62

Se hai problemi a impostare il valore di un campo nascosto perché gli stai passando un ID, questa è la soluzione:

Invece di $("#hidden_field_id").val(id)farlo $("input[id=hidden_field_id]").val(id). Non sono sicuro di quale sia la differenza, ma funziona.

— Chuck Callebs
fonte

3

Attenzione, questo può essere molto lento nei browser meno recenti ( learn.jquery.com/using-jquery-core/selecting-elements )

— Alex Klaus

Non funziona per me, browser - Chrome 48. Non so perché

— Gurpreet Singh

26

Finalmente ho trovato una soluzione ed è semplice:

document.getElementById("texens").value = "tinkumaster";

Funziona come un fascino. Nessun indizio sul perché jQuery non ricada a questo.

— zamber
fonte

Tecnicamente utilizza DOM non jQuery, ma è semplice e funziona (ho provato quasi tutte le risposte qui per il mio caso di modifica del valore al momento dell'invio del modulo e non funzionavano).

— hlongmore,

Ecco perché ho pubblicato questa risposta;). Sono contento che abbia aiutato. Per quanto riguarda jQuery hanno una potenziale soluzione qui github.com/jquery/jquery/blob/… ma è solo per type="radio". Sono pigro nel segnalare un problema, soprattutto se ho risolto il problema 4 anni fa. Sono anche lacerato se dovesse essere risolto in jQuery - forse è stato implementato in quel modo per proteggere i kiddie jQuery da loro stessi? Chissà ...

— Zamber,

1

La soluzione jQuery non ha funzionato neanche per me. Dovevo andare con Vanilla JS.

— Varun Sharma,

17

Ho avuto lo stesso problema. stranamente Google Chrome e forse altri (non sono sicuro) non gli piacevano

$("#thing").val(0);

input type="hidden" id="thing" name="thing" value="1" />

(nessun cambiamento)

$("#thing").val("0");

input type="hidden" id="thing" name="thing" value="1" />

(nessun cambiamento)

ma questo funziona !!!!

$("#thing").val("no");

input type="hidden" id="thing" name="thing" value="no" />

I CAMBIAMENTI!!

$("#thing").val("yes");

input type="hidden" id="thing" name="thing" value="yes" />

I CAMBIAMENTI!!

deve essere una "cosa stringa"

— mr.zaga
fonte

2

Questo ha risolto anche per me. Ho finito per usare .val(' 0'), che è correttamente analizzato parseIntin Javascript e int()in Python, il mio backend.

— rastrellare il

10

$('input[name=hidden_field_name]').val('newVal');

ha funzionato per me, quando nessuno dei due

$('input[id=hidden_field_id]').val('newVal');

né

$('#hidden_field_id').val('newVal');

fatto.

— Dirk Seifert
fonte

9

.val non ha funzionato per me, perché sto afferrando l'attributo value lato server e il valore non è stato sempre aggiornato. quindi ho usato:

var counter = 0;
$('a.myClickableLink').click(function(event){
   event.preventDefault();
   counter++;

   ...
   $('#myInput').attr('value', counter);
}

Spero che aiuti qualcuno.

— Sophie
fonte

Questa è la risposta che mi piace. L'uso della funzione attr evita tutte le contorsioni sopra menzionate e fa la cosa giusta.

7

In realtà, questo è un problema in corso. Mentre Andy ha ragione sulla fonte scaricata, .val (...) e .attr ('value', ...) non sembrano effettivamente modificare l'html. Penso che questo sia un problema javascript e non un problema jquery. Se avessi usato Firebug anche tu avresti avuto la stessa domanda. Mentre sembra che se si invia il modulo con i valori modificati che passerà, l'html non cambia. Mi sono imbattuto in questo problema nel tentativo di creare un'anteprima di stampa del modulo modificato (facendo [form] .html ()) copia tutto bene, comprese tutte le modifiche trannei valori cambiano. Pertanto, la mia anteprima di stampa modale è alquanto inutile ... la mia soluzione alternativa potrebbe essere quella di "costruire" un modulo nascosto contenente i valori che hanno aggiunto, o generare l'anteprima in modo indipendente e apportare ogni modifica che l'utente fa anche modificare l'anteprima. Entrambi non sono ottimali, ma a meno che qualcuno non capisca perché il comportamento di impostazione del valore non cambia l'html (nel DOM sto assumendo) dovrà farlo.

+1 da me! Hai ragione. value e .val () hanno problemi durante l'aggiornamento tramite jQuery. Hai trovato qualcosa in giro?

— NullPointer

4

Avevo lo stesso problema e ho scoperto cosa non andava. Ho definito l'HTML come

<form action="url" method="post">
    <input type="hidden" id="email" />
<form>
<script>
    function onsomeevent()
    {
       $("#email").val("a@a.com");
    }
</script>

La lettura dei valori del modulo sul server ha sempre comportato l'email vuota. Dopo avermi grattato la testa (e numerose ricerche), mi sono reso conto che l'errore non stava definendo correttamente il modulo / input. Modificando l'input (come mostrato dopo), ha funzionato come un incantesimo

<input type="hidden" id="email" name="email" />

Aggiungendo a questa discussione nel caso in cui altri abbiano lo stesso problema.

— Jardalu
fonte

3

Nel mio caso, stavo usando una non stringa (numero intero) come parametro di val () che non funziona, il trucco è semplice come

$("#price").val('' + price);

— Shawn
fonte

2

L'uso val()non ha funzionato per me. Ho dovuto usare .attr()ovunque. Inoltre avevo diversi tipi di input e dovevo essere piuttosto esplicito nel caso delle caselle di controllo e dei menu selezionati.

Aggiorna campo di testo

$('#model_name').attr('value',nameVal);

Aggiorna immagine accanto all'input del file

$('#img-avatar').attr('src', avatarThumbUrl);

Aggiornamento booleano

if (isActive) {
    $('#model_active').attr('checked',"checked");
} else {
    $('#model_active').attr('checked', null) ;
}

Seleziona aggiornamento (con numero o stringa)

$('#model_framerate').children().each(function(i, el){
    var v = $(el).val();
    if (v === String(framerateVal)) { 
        $(el).attr('selected','selected');
    } else {
        $(el).attr('selected',null);
    }
}

— Julian Mann
fonte

1

Un altro gotcha qui ha perso un po 'del mio tempo, quindi ho pensato di passare lungo la punta. Avevo un campo nascosto a cui avevo dato un ID. e []parentesi nel nome (dovuto all'uso con struts2) e il selettore $("#model.thefield[0]")non troverebbe il mio campo nascosto. Rinominando l'id per non utilizzare i punti e le parentesi, il selettore ha iniziato a funzionare. Quindi alla fine ho finito con un id di model_the_field_0invece e il selettore ha funzionato bene.

— user738048
fonte

Questo perché il tuo selettore $("#model.thefield[0]")viene interpretato come: un elemento iduguale a model, un css classdi thefielde alcuni attributechiamati 0... Se vuoi usare quei personaggi nel tuo iduso, l'approccio suggerito da Chuck Callebs nella sua risposta . In HTML5 idpuò essere qualsiasi stringa che non è vuota e non contiene alcuno spazio ( riferimento ).

— Oliver,

1

Utilizzando ID:

$('input:hidden#texens').val('tinkumaster');

Utilizzando la classe:

$('input:hidden.many_texens').val('tinkumaster');

— Arman H
fonte

0

Se stai cercando un haml, questa è la risposta per un campo nascosto per impostare un valore su un campo nascosto come

%input#forum_id.hidden

Nel tuo jquery basta convertire il valore in stringa e quindi aggiungerlo usando la proprietà attr in jquery. spero che questo funzioni anche in altre lingue.

$('#forum_id').attr('val',forum_id.toString());

— Yarrabhumi
fonte

-1

<javascript>


slots=''; hidden=''; basket = 0;

    cost_per_slot = $("#cost_per_slot").val();
    //cost_per_slot = parseFloat(cost_per_slot).toFixed(2)

    for (i=0; i< check_array.length; i++) {
        slots += check_array[i] + '\r\n';
        hidden += check_array[i].substring(0, 8) + '|';
        basket = (basket + parseFloat(cost_per_slot));
    }

    // Populate the Selected Slots section
    $("#selected_slots").html(slots);

    // Update hidden slots_booked form element with booked slots
    $("#slots_booked").val(hidden);     

    // Update basket total box
    basket = basket.toFixed(2);
    $("#total").html(basket);

— carolina
fonte

-1

Usa semplicemente la sintassi sotto get e set

OTTENERE

//Script 
var a = $("#selectIndex").val();

qui una variabile conterrà il valore di hiddenfield (selectindex)

Lato server

<asp:HiddenField ID="selectIndex" runat="server" Value="0" />

IMPOSTATO

var a =10;
$("#selectIndex").val(a);

— mzonerz
fonte

L'OP chiede perché il codice come il tuo non funziona per lui, quindi questo è inutile per questa domanda.

— ProfK,

-1

Chiunque stia lottando con questo, c'è un modo "inline" molto semplice per farlo con jQuery:

<input type="search" placeholder="Search" value="" maxlength="256" id="q" name="q" style="width: 300px;" onChange="$('#ADSearch').attr('value', $('#q').attr('value'))"><input type="hidden" name="ADSearch" id="ADSearch" value="">

Questo imposta il valore del campo nascosto mentre il testo viene digitato nell'input visibile usando l'evento onChange. Utile (come nel mio caso) in cui si desidera passare un valore di campo a un modulo "Ricerca avanzata" e non forzare l'utente a digitare nuovamente la query di ricerca.

— joyrex
fonte