Definir valor do campo oculto em um formulário usando o ".val ()" do jQuery não funciona

188

Eu tenho tentado definir o valor de um campo oculto em um formulário usando jQuery, mas sem sucesso.

Aqui está um código de exemplo que explica o problema. Se eu mantiver o tipo de entrada como "texto", ele funcionará sem problemas. Mas, alterar o tipo de entrada para "oculto", não 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>

Eu também tentei a seguinte solução alternativa, definindo o tipo de entrada como "texto" e, em seguida, usando um estilo "exibição: nenhum" para a caixa de entrada. Mas, isso também falha! Parece que o jQuery tem algum problema ao definir campos de entrada ocultos ou invisíveis.

Alguma ideia? Existe uma solução alternativa para isso que realmente funciona?

jquery set hidden-fields texens
fonte

316

:textfalhará para uma entrada com um valor de tipo de hidden. Também é muito mais eficiente usar apenas:

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

Os atributos de ID devem ser exclusivos em uma página da web, verifique se os seus são, pois isso pode contribuir para os problemas que você está tendo, e especificar um seletor mais complicado apenas torna as coisas mais lentas e não parece tão elegante.

Exemplo em http://jsbin.com/elovo/edit , usando seu código de exemplo em http://jsbin.com/elovo/2/edit

Andy E
fonte

Andy, obrigado pela resposta rápida. Na verdade, tentei primeiro com os "#texens" e depois com "#input: hidden # texens" e nenhum deles parecia funcionar. Quando alterei o tipo de entrada no formulário de "oculto" para "texto" e "#input: hidden: texens" para "#input: text: texens", funcionou sem problemas. O "#input: text # texens" foi um erro de digitação acima e deveria ter sido "#input: hidden # texens" ou apenas "#texens", como você mencionou. Portanto, parece que os valores do campo oculto não estão sendo alterados.

texens 5/06/10

1

@texens: Eu suspeitaria que o problema está em outro lugar. Como você pode ver no exemplo ao qual vinculei, val()funciona bem na entrada oculta, alterando o valor de "não alterado" para "alterado". Revisei o exemplo para incluir o código que você colou acima, com um alerta para confirmar a alteração do valor: jsbin.com/elovo/2/edit

Andy E

Andy, Muito obrigado pelo exemplo. Eu executei o código mencionado acima e funciona exatamente como deveria. E o alerta realmente confirma que o valor foi alterado. Eu estava abrindo a fonte da página usando o recurso "Exibir fonte da página" do Firefox. E na fonte da página, ele ainda mostra o valor antigo e não o novo valor (mesmo para o código na pasta mencionado acima). Mas, a caixa de alerta confirma o valor alterado. Então, estou assumindo que este é um problema do Firefox (ou estou sendo muito estúpido e ignorando algo importante?). Mais uma vez, obrigado pelo seu tempo :)

texens

2

@texens: não há problema. Eu sugeriria o uso de uma ferramenta de depuração adequada, o Firebug , se você usa o Firefox, em vez de visualizar a fonte. O comportamento de "exibir código-fonte" é mais ou menos o mesmo em todos os navegadores e mostrará o código-fonte não modificado e baixado da página.

Andy E

2

Eu não acho que o problema esteja no Firefox ou em uma ferramenta específica, tanto quanto na forma como o HTML modificado é renderizado e exibido. Eu tenho a mesma situação do OP, exceto que há um pouco mais de jQuery envolvido. No meu caso, como neste, o código funciona corretamente - o evento click atualiza corretamente uma entrada do tipo "oculto" - mas o Firebug não exibe os valores atualizados para os campos ocultos, mesmo que tenham sido atualizados e o jQuery possa acessá-los , e até mesmo valores que atualizados para campos visíveis são exibidos em Firebug corretamente.

Dave Duplantis

62

Se você estiver com problemas para definir o valor de um campo oculto porque está passando um ID para ele, esta é a solução:

Em vez de $("#hidden_field_id").val(id)apenas fazer $("input[id=hidden_field_id]").val(id). Não tenho certeza qual é a diferença, mas funciona.

Chuck Callebs
fonte

3

Cuidado, isso pode ser muito lenta em navegadores mais antigos ( learn.jquery.com/using-jquery-core/selecting-elements )

Alex Klaus

Não funciona para mim, navegador - Chrome 48. Não sei por que

Gurpreet Singh

26

Finalmente, encontrei uma solução e é simples:

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

Funciona como um encanto. Nenhuma pista do porquê do jQuery não voltar a isso.

zamber
fonte

Tecnicamente, isso usa o DOM, não o jQuery, mas é simples e funciona (tentei quase todas as respostas aqui no meu caso de alterar o valor no momento do envio do formulário e elas não estavam funcionando).

Hlongmore 02/07

Foi por isso que postei esta resposta;). Ainda bem que ajudou. Quanto ao jQuery, eles têm uma possível correção aqui github.com/jquery/jquery/blob/…, mas é apenas para type="radio". Estou com preguiça de relatar um problema, principalmente porque resolvi esse problema há 4 anos. Também estou surpreso se ele deve ser corrigido no jQuery - possivelmente foi implementado dessa maneira para proteger as crianças jQuery de si mesmas? Quem sabe ...

zamber

1

A solução jQuery também não funcionou para mim. Tinha que ir com o Vanilla JS.

Varun Sharma

17

Eu tive o mesmo problema. Curiosamente, o Google Chrome e possivelmente outros (não tenho certeza) não gostaram

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

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

(sem alteração)

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

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

(sem alteração)

mas isso funciona !!!!

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

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

ALTERAR!!

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

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

ALTERAR!!

deve ser uma "coisa de string"

mr.zaga
fonte

2

Isso corrigiu para mim também. Acabei usando .val(' 0'), que é analisado corretamente parseIntem Javascript e também int()em Python, meu back-end.

rattray

10

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

trabalhou para mim, quando nem

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

nem

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

fez.

Dirk Seifert
fonte

9

.val não funcionou para mim, porque estou pegando o lado do servidor do atributo value e o valor nem sempre foi atualizado. então eu usei:

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

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

Espero que ajude alguém.

Sophie
fonte

Essa é a resposta que eu gosto. O uso da função attr evita todas as contorções mencionadas acima e faz a coisa certa.

7

Na verdade, esse é um problema contínuo. Enquanto Andy está certo sobre a fonte baixada, .val (...) e .attr ('value', ...) não parecem realmente modificar o html. Eu acho que este é um problema de javascript e não um problema de jquery. Se você tivesse usado o firebug, mesmo teria feito a mesma pergunta. Embora pareça que, se você enviar o formulário com os valores modificados, o html não será alterado. Corri para esse problema tentando criar uma visualização de impressão do formulário modificado (fazendo [form] .html ()), ele copia tudo bem, incluindo todas as alterações, excetovalores muda. Assim, minha visualização modal de impressão é um pouco inútil ... minha solução alternativa pode ter que ser 'criar' um formulário oculto contendo os valores adicionados, ou gerar a visualização independentemente e fazer cada modificação que o usuário fizer também modificar a visualização. Ambos não são ótimos, mas, a menos que alguém descubra por que o comportamento de definição de valor não altera o html (no DOM, estou assumindo), será necessário.

fonte

+1 de mim! Você está certo. value e .val () estão com problemas ao atualizá-lo usando jQuery. Você encontrou alguma coisa por perto?

NullPointer 23/07

4

Eu estava tendo o mesmo problema e descobri o que estava errado. Eu tinha o HTML definido como

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

A leitura dos valores do formulário no servidor sempre resultava em email vazio. Depois de coçar a cabeça (e numerosas pesquisas), percebi que o erro não era definir o formulário / entrada corretamente. Ao modificar a entrada (como mostrado a seguir), funcionou como um encanto

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

Adicionando a esta discussão, caso outras pessoas tenham o mesmo problema.

Jardalu
fonte

3

No meu caso, eu estava usando uma não-string (número inteiro) como o parâmetro val () que não funciona, o truque é tão simples quanto

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

Shawn
fonte

2

Usar val()não funcionou para mim. Eu tive que usar.attr() todos os lugares. Também tinha tipos diferentes de entradas e tinha que ser bem explícito no caso de caixas de seleção e menus selecionados.

Atualizar campo de texto

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

Atualizar imagem ao lado da entrada do arquivo

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

Atualizar booleano

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

Atualizar seleção (com número ou sequência)

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

Outra pegadinha aqui desperdiçou um pouco do meu tempo, então pensei em passar a ponta. Eu tinha um campo escondido, eu dei um id que tinha. e []colchetes no nome (devido ao uso com struts2) e o seletor $("#model.thefield[0]")não encontrou meu campo oculto. Renomear o ID para não usar pontos e colchetes fez com que o seletor começasse a funcionar. Então, no final, acabei com um id model_the_field_0e o seletor funcionou bem.

user738048
fonte

Isso porque seu seletor $("#model.thefield[0]")está sendo interpretado como: um elemento com idigual a model, um css classde thefielde alguns attributechamados 0... Se você quiser usar esses caracteres no seu iduso a abordagem sugerida pela Chuck Callebs em sua resposta . No HTML5, idpode haver qualquer sequência que não esteja vazia e não contenha caracteres de espaço ( referência ).

25413 Oliver

1

Usando ID:

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

Usando classe:

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

Arman H
fonte

0

Se você estiver procurando por haml, esta é a resposta para o campo oculto para definir valor para um campo oculto, como

%input#forum_id.hidden

No seu jquery, apenas converta o valor em string e, em seguida, acrescente-o usando a propriedade attr no jquery. espero que isso também funcione em outros idiomas.

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

Basta usar a sintaxe abaixo de obter e definir

OBTER

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

aqui uma variável manterá o valor de hiddenfield (selectindex)

Lado do servidor

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

CONJUNTO

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

mzonerz
fonte

O OP está perguntando por que um código como o seu não funciona para ele, então isso é inútil para esta pergunta.

ProfK 03/12/19

-1

Qualquer pessoa que esteja lutando com isso, existe uma maneira "inline" muito simples de fazer isso com o 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="">

Isso define o valor do campo oculto à medida que o texto é digitado na entrada visível usando o evento onChange. Útil (como no meu caso) em que você deseja passar um valor de campo para um formulário "Pesquisa avançada" e não forçar o usuário a digitar novamente sua consulta de pesquisa.

Joyrex
fonte

Definir valor do campo oculto em um formulário usando o ".val ()" do jQuery não funciona

Respostas: