Establecer el valor del campo oculto en un formulario usando ".val ()" de jQuery no funciona

188

He estado tratando de establecer el valor de un campo oculto en un formulario usando jQuery, pero sin éxito.

Aquí hay un código de muestra que explica el problema. Si mantengo el tipo de entrada en "texto", funciona sin ningún problema. Pero, cambiar el tipo de entrada a "oculto", ¡no funciona!

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

También probé la siguiente solución, configurando el tipo de entrada en "texto" y luego usando un estilo "display: none" para el cuadro de entrada. ¡Pero esto también falla! Parece que jQuery tiene algunos problemas para configurar campos de entrada ocultos o invisibles.

¿Algunas ideas? ¿Hay alguna solución para esto que realmente funcione?

jquery set hidden-fields

— texens
fuente

316

:textfallará para una entrada con un valor de tipo de hidden. También es mucho más eficiente usar solo:

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

Los atributos de ID deben ser únicos en una página web, asegúrese de que los suyos lo sean, ya que esto puede contribuir a cualquier problema que tenga, y especificar un selector más complicado simplemente ralentiza las cosas y no se ve tan ordenado.

Ejemplo en http://jsbin.com/elovo/edit , utilizando su código de ejemplo en http://jsbin.com/elovo/2/edit

— Andy E
fuente

Andy, gracias por la rápida respuesta. De hecho, intenté con los "#texens" primero, y luego con "#input: hidden # texens" y ninguno de ellos parecía funcionar. Cuando cambié el tipo de entrada en el formulario de "oculto" a "texto" y "#input: hidden: texens" a "#input: text: texens", funcionó sin ningún problema. El "#input: text # texens" era un error tipográfico anterior, y debería haber sido "#input: hidden # texens" o simplemente "#texens" como acaba de mencionar. Entonces, parece que los valores del campo oculto no se están cambiando.

— texens

1

@texens: sospecharía que el problema se encuentra en otra parte. Como puede ver en el ejemplo al que me vinculé, val()funciona bien en la entrada oculta, cambiando el valor de "no cambiado" a "cambiado". Revisé el ejemplo para incluir el código que pegó anteriormente, con una alerta para confirmar el cambio de valor: jsbin.com/elovo/2/edit

— Andy E

Andy, muchas gracias por el ejemplo. Ejecuté el código mencionado anteriormente y funciona exactamente como se supone que debe ser. Y la alerta confirma que el valor ha cambiado. Había estado abriendo la fuente de la página usando la función "Ver fuente de la página" de Firefox. Y en la fuente de la página, todavía muestra el valor anterior y no el nuevo (incluso para el código en el pastebin mencionado anteriormente). Pero, el cuadro de alerta confirma el valor cambiado. Entonces, supongo que este es un problema de Firefox (¿o estoy siendo demasiado estúpido y pasando por alto algo importante?). Una vez más, gracias por su tiempo :)

— texens

2

@texens: no hay problema. Sugeriría usar una herramienta de depuración adecuada, Firebug si usa Firefox, en lugar de ver la fuente. El comportamiento de "ver código fuente" es más o menos el mismo en todos los navegadores, y mostrará el código fuente descargado y no modificado de la página.

— Andy E

2

No creo que el problema sea tanto con Firefox o una herramienta específica como con la forma en que se representa y muestra el HTML modificado. Tengo la misma situación que el OP, excepto que hay bastante más jQuery involucrado. En mi caso, como en este caso, el código funciona correctamente: el evento click actualiza correctamente una entrada de tipo "oculto", pero Firebug no muestra los valores actualizados para los campos ocultos, aunque se hayan actualizado y jQuery pueda acceder a ellos. , y aunque los valores actualizados para los campos visibles se muestran en Firebug correctamente.

— Dave DuPlantis

62

Si tiene problemas para configurar el valor de un campo oculto porque le está pasando una identificación, esta es la solución:

En lugar de $("#hidden_field_id").val(id)simplemente hacerlo $("input[id=hidden_field_id]").val(id). No estoy seguro de cuál es la diferencia, pero funciona.

— Chuck Callebs
fuente

3

Cuidado, esto puede ser muy lento en navegadores antiguos ( learn.jquery.com/using-jquery-core/selecting-elements )

— Alex Klaus

No funciona para mí, navegador - Chrome 48. No estoy seguro de por qué

— Gurpreet Singh

26

Finalmente, he encontrado una solución y es simple:

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

Funciona de maravilla. No tengo idea de por qué jQuery no recurre a esto.

— zamber
fuente

Técnicamente, esto usa el DOM, no jQuery, pero es simple y funciona (probé casi todas las respuestas aquí para mi caso de cambiar el valor en el momento del envío del formulario, y no funcionaban).

— hlongmore

Por eso publiqué esta respuesta;). Me alegra que haya ayudado. En cuanto a jQuery, tienen una solución potencial aquí github.com/jquery/jquery/blob/… pero es solo para type="radio". Soy demasiado flojo para informar un problema, especialmente dado que resolví este problema hace 4 años. También estoy desgarrado si se debe solucionar en jQuery, ¿posiblemente se implementa de esa manera para proteger a los niños jQuery de sí mismos? Quién sabe ...

— zamber

1

La solución jQuery tampoco funcionó para mí. Tuve que ir con Vanilla JS.

— Varun Sharma

17

Tuve el mismo problema Curiosamente, Google Chrome y posiblemente otros (no estoy seguro) no les gustó

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

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

(ningún cambio)

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

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

(ningún cambio)

pero esto funciona !!!!

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

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

CAMBIOS !!

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

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

CAMBIOS !!

debe ser una "cosa de cuerdas"

— señor zaga
fuente

2

Esto también me lo arregló. Terminé usando .val(' 0'), que se analiza correctamente parseInten Javascript, así como int()en Python, mi back-end.

— Rattray

10

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

funcionó para mí, cuando ninguno

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

ni

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

hizo.

— Dirk Seifert
fuente

9

.val no funcionó para mí, porque estoy agarrando el atributo de valor del lado del servidor y el valor no siempre se actualizó. así que usé:

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

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

Espero que ayude a alguien.

— Sophie
fuente

Esa es la respuesta que me gusta. El uso de la función attr evita todas las contorsiones mencionadas anteriormente y hace lo correcto.

7

En realidad, este es un problema continuo. Si bien Andy tiene razón sobre la fuente descargada, .val (...) y .attr ('valor', ...) no parecen modificar realmente el html. Creo que este es un problema de JavaScript y no un problema de jquery. Si hubieras usado Firebug, incluso hubieras tenido la misma pregunta. Si bien parece que si envía el formulario con los valores modificados, el html no cambiará. Me encontré con este problema al intentar crear una vista previa de impresión del formulario modificado (haciendo [formulario] .html ()), copia todo bien, incluidos todos los cambios exceptocambios de valores Por lo tanto, mi vista previa de impresión modal es algo inútil ... mi solución puede ser 'construir' un formulario oculto que contenga los valores que han agregado, o generar la vista previa de forma independiente y hacer cada modificación que el usuario haga también para modificar la vista previa. Ambas no son óptimas, pero a menos que alguien descubra por qué el comportamiento de establecimiento de valores no cambia el html (en el DOM, supongo) que tendrá que hacerlo.

¡+1 de mi parte! Tienes razón. value y .val () tienen problemas al actualizarlo usando jQuery. ¿Encontraste algo alrededor?

— NullPointer

4

Estaba teniendo el mismo problema y descubrí lo que estaba mal. Tenía el HTML definido como

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

La lectura de los valores del formulario en el servidor siempre resultó en un correo electrónico vacío. Después de rascarme la cabeza (y numerosas búsquedas), me di cuenta de que el error no estaba definiendo el formulario / entrada correctamente. Al modificar la entrada (como se muestra a continuación), funcionó de maravilla

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

Agregar a este hilo en caso de que otros tengan el mismo problema.

— Jardalu
fuente

3

En mi caso, estaba usando un non-string (entero) como parámetro de val () que no funciona, el truco es tan simple como

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

— Shawn
fuente

2

Usar val()no funcionó para mí. Tuve que usar en .attr()todas partes. También tuve diferentes tipos de entradas y tuve que ser bastante explícito en el caso de casillas de verificación y menús seleccionados.

Actualizar campo de texto

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

Actualizar imagen junto a la entrada del archivo

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

Actualización booleana

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

Actualización select (con número o cadena)

$('#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
fuente

1

Otro problema aquí desperdició parte de mi tiempo, así que pensé en pasarle la propina. Tenía un campo oculto que le di una identificación que tenía. y []corchetes en el nombre (debido al uso con struts2) y el selector $("#model.thefield[0]")no encontraría mi campo oculto. Cambiar el nombre de la identificación para que no use los puntos y los corchetes hizo que el selector comenzara a funcionar. Así que al final terminé con una identificación de model_the_field_0y el selector funcionó bien.

— usuario738048
fuente

Esto se debe a que su selector $("#model.thefield[0]")se está interpretando como: un elemento con idigual a model, un css classde thefieldy algunos attributellamados 0... Si desea utilizar esos caracteres en su iduso, utilice el enfoque sugerido por Chuck Callebs en su respuesta . En HTML5, idpuede ser cualquier cadena que no esté vacía y no contenga ningún espacio ( referencia ).

— Oliver

1

Usando ID:

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

Usando clase:

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

— Arman H
fuente

0

Si está buscando haml, esta es la respuesta para el campo oculto para establecer el valor en un campo oculto como

%input#forum_id.hidden

En su jquery simplemente convierta el valor a cadena y luego añádalo usando la propiedad attr en jquery. Espero que esto también funcione en otros idiomas también.

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

— Yarrabhumi
fuente

-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
fuente

-1

Simplemente use la sintaxis debajo de get y set

OBTENER

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

aquí una variable contendrá el valor de hiddenfield (selectindex)

Lado del servidor

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

CONJUNTO

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

— mzonerz
fuente

El OP pregunta por qué el código como el suyo no funciona para él, por lo que esto es inútil para esta pregunta.

— ProfK

-1

Cualquier otra persona que esté luchando con esto, hay una forma "en línea" muy simple de hacer esto 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="">

Esto establece el valor del campo oculto a medida que el texto se escribe en la entrada visible utilizando el evento onChange. Útil (como en mi caso) donde desea pasar un valor de campo a un formulario de "Búsqueda avanzada" y no obligar al usuario a volver a escribir su consulta de búsqueda.

— Joyrex
fuente