Impostare il valore di campo nascosto in un modulo utilizzando jQuery “.VAL ()” non funziona

StackOverflow https://stackoverflow.com/questions/2979772

  •  24-10-2019
  •  | 
  •  

Domanda

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

Ecco un esempio di codice che spiega il problema. Se continuo il tipo di ingresso per "testo", funziona senza alcuna difficoltà. Ma, cambiando il tipo di ingresso a "nascosti", 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 ingresso per "testo" e quindi utilizzando un "display: none" di stile per la casella di input. Ma, anche questo non funziona! Sembra jQuery ha alcune impostazioni nascoste o di input invisibili campi di difficoltà.

Tutte le idee? C'è una soluzione per questo che funziona davvero?

È stato utile?

Soluzione

:text fallirà per un ingresso con un valore del tipo di hidden. E 'anche molto più efficiente al proprio uso: 

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

attributi ID deve essere univoco su una pagina web, assicurarsi che il vostro sono in quanto ciò potrebbe contribuire a eventuali problemi si hanno, e specificando un selettore più complicato solo rallenta le cose e non sembra pulito.

Esempio a http://jsbin.com/elovo/edit , utilizzando il codice di esempio a < a href = "http://jsbin.com/elovo/2/edit" rel = "noreferrer"> http://jsbin.com/elovo/2/edit

Altri suggerimenti

Se hai problemi a impostare il valore di un campo nascosto perchè si sta passando un ID ad esso, questa è la soluzione:

Invece di $("#hidden_field_id").val(id) basta fare $("input[id=hidden_field_id]").val(id). Non so quale sia la differenza, ma funziona.

Infine, ho trovato una soluzione ed è semplice: 

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

funziona come un fascino. Nessun indizio perché jQuery non cade di nuovo a questo.

Ho avuto lo stesso problema. stranamente Google Chrome e possibilmente altri (non sono sicuro) non piaceva 

$("#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" />

MODIFICHE !! 

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

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

MODIFICHE !!

deve essere una "cosa stringa" 

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

ha funzionato per me, quando né 

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

né 

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

ha fatto.

non ha funzionato .VAL per me, perché sto afferrando il lato server attributo value e il valore non è stato sempre aggiornato. Così ho usato: 

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

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

La speranza che aiuta qualcuno.

In realtà, questo è un problema in corso. Mentre Andy è di destra circa la fonte scaricato, .VAL (...) e .attr ( 'valore', ...) non sembrano in realtà modificare il codice HTML. Credo che questo sia un problema javascript e non un problema jQuery. Se tu avessi usato Firebug anche che avrebbe avuto la stessa domanda. Mentre sembra che se si invia il modulo con i valori modificati che passerà attraverso, il codice HTML non cambia. Mi sono imbattuto in questo problema cercando di creare un anteprima di stampa della forma modificata (facendo [forma] .html ()) viene copiato tutto bene, comprese tutte le modifiche tranne valori modifiche. Così, il mio modale anteprima di stampa è un po 'inutile ... la mia soluzione alternativa potrebbe deve essere a 'costruire' una forma nascosta che contiene i valori che sono stati aggiunti, o generare l'anteprima in modo indipendente e rendere ogni modifica l'utente effettua anche modificare l'anteprima. Entrambi sono inoptimal, ma a meno che le figure qualcuno fuori perché il comportamento di impostazione del valore non cambia l'html (nel DOM sto supponendo) che dovranno fare.

ho avuto lo stesso problema, e ho scoperto che cosa era sbagliato. Avevo il codice HTML definito 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 form sul server di sempre comportato email vuota. Dopo graffiare la mia testa (e numerosa di ricerca), ho capito l'errore non è stato definire la forma / di ingresso in modo corretto. Sulla modifing l'ingresso (come mostrato successiva), ha funzionato come un fascino 

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

In aggiunta a questa discussione nel caso altri hanno lo stesso problema.

Nel mio caso, ero con un non-stringa (intero) come parametro di val () che non funziona, il trucco è semplice come 

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

Utilizzando val() non ha funzionato per me. Ho dovuto usare .attr() ovunque. Inoltre ho avuto diversi tipi di ingressi e doveva essere piuttosto esplicita nel caso di caselle di controllo e selezionare i menu.

Aggiorna campo di testo 

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

Aggiornamento immagine accanto al file di input 

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

Aggiorna booleano 

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

Aggiorna selezionare (con il numero o una 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);
    }
}

Un altro punto qui sprecato un po 'del mio tempo, così ho pensato di passare lungo la punta. Ho avuto un campo nascosto ho dato un id che ha avuto. e staffe [] nel nome (a causa di uso con Struts2) e la $("#model.thefield[0]") selettore non avrebbero trovato il mio campo nascosto. Rinomina l'id di non utilizzare i periodi e staffe causato il selettore per iniziare a lavorare. Così alla fine ho finito con un id di model_the_field_0, invece, e il selettore funzionato benissimo.

Utilizzando ID: 

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

classe utilizzando: 

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

Simply sintassi uso sotto get e set

GET 

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

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

Lato server 

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

SET 

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

Se siete alla ricerca di Haml allora questa è la risposta per il campo nascosto al valore impostato a un campo nascosto come 

%input#forum_id.hidden

Nel vostro jquery solo convertire il valore di corda e poi aggiungerla usando attr proprietà in jQuery. spero che questo funziona anche in altre lingue. 

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

<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);

Chiunque altro che sta lottando con questo, c'è un modo "in linea" 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="">

Questa imposta il valore del campo nascosto come testo viene digitato nella presa visibile utilizzando l'evento onChange. Utile (come nel mio caso) in cui si desidera passare un valore di campo ad una forma "Ricerca avanzata" e non obbligare l'utente a digitare nuovamente la query di ricerca.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top