jQuery - Criar elemento de formulário oculto em tempo real

333

Qual é a maneira mais simples de criar dinamicamente um campo de formulário de entrada oculto usando o jQuery?

javascript jquery forms hidden-field Mithun Sreedharan
fonte

Respostas:

613 
$('<input>').attr('type','hidden').appendTo('form');

Para responder sua segunda pergunta:

$('<input>').attr({
    type: 'hidden',
    id: 'foo',
    name: 'bar'
}).appendTo('form');
David Hellsing
fonte
56
Observe que o IE engasgará se você tentar alterar o tipo de entrada após a criação. Use $('<input type="hidden">').foo(...)como uma solução alternativa.
Roy Tinker
4
Além disso, a documentação do jQuery sugere que, como a manipulação do DOM é cara, se você tiver várias entradas a serem adicionadas, adicione todas elas uma vez usando algo como $ (this) .append (hidden_element_array.join (''));
Kedar Mhaswade 2/11
1
Eu apenas tentei esse método com o jQuery 1.6.2 e recebi esse erro com o Firefox 7.0.1: "exceção não capturada: a propriedade type não pode ser alterada" Parece que você não pode usar o método attr para alterar a propriedade type nessas condições. Agora estou tentando o método abaixo ...
Mikepote 11/11
Essa mesma abordagem funcionará com a .propfunção mais recente da versão mais recente da API?
SpaceBison 31/08/2012
3
@SpaceBison .propnão é "o novo .attr", como muitas pessoas pensam. Você ainda deve usar .attrpara definir atributos.
precisa
138 
$('#myformelement').append('<input type="hidden" name="myfieldname" value="myvalue" />');
Mark Bell
fonte
1
Alguém testou esta resposta no IE antigo?
Arthur Halma
11
Pessoalmente, acredito que essa é uma abordagem muito melhor do que a resposta aceita, pois envolve menos manipulação de DOM / chamadas de função.
PaulSkinner
3
@PaulSkinner Para o caso em questão, sim, você está correto, mas nem sempre é assim. Dê uma olhada aqui stackoverflow.com/a/2690367/1067465
Fernando Silva
34

O mesmo que o de David, mas sem attr ()

$('<input>', {
    type: 'hidden',
    id: 'foo',
    name: 'foo',
    value: 'bar'
}).appendTo('form');
Sergey Onishchenko
fonte
3
Existe um nome para essa maneira de preencher uma tag?
precisa saber é
como acrescentar a entrada apenas 1 vez? se a sua exist que continuam entrando novo valor com o mesmo atributo
Neve Bases
Muito simplificado, eu adoro isso.
Jacques
27

se você quiser adicionar mais atributos, faça o seguinte:

$('<input>').attr('type','hidden').attr('name','foo[]').attr('value','bar').appendTo('form');

Ou

$('<input>').attr({
    type: 'hidden',
    id: 'foo',
    name: 'foo[]',
    value: 'bar'
}).appendTo('form');
Slipstream
fonte
isso está dando erro no console Unexpected identifier.
Prafulla Kumar Sahu
Segundo código, parece que a necessidade "id" para ser gerado dinamicamente algo como foo1, foo2 etc
Web_Developer
5 
function addHidden(theForm, key, value) {
    // Create a hidden input element, and append it to the form:
    var input = document.createElement('input');
    input.type = 'hidden';
    input.name = key;'name-as-seen-at-the-server';
    input.value = value;
    theForm.appendChild(input);
}

// Form reference:
var theForm = document.forms['detParameterForm'];

// Add data:
addHidden(theForm, 'key-one', 'value');
Saurabh Chandra Patel
fonte
2
Qual é o 'name-as-seen-at-the-server'?
SaAtomic 13/03/19
1

Trabalhando com JSFIDDLE

Se seu formulário é como 

<form action="" method="get" id="hidden-element-test">
      First name: <input type="text" name="fname"><br>
      Last name: <input type="text" name="lname"><br>
      <input type="submit" value="Submit">
</form> 
    <br><br>   
    <button id="add-input">Add hidden input</button>
    <button id="add-textarea">Add hidden textarea</button>

Você pode adicionar entrada e área de texto ocultas para formar desta forma

$(document).ready(function(){

    $("#add-input").on('click', function(){
        $('#hidden-element-test').prepend('<input type="hidden" name="ipaddress" value="192.168.1.201" />');
        alert('Hideen Input Added.');
    });

    $("#add-textarea").on('click', function(){
        $('#hidden-element-test').prepend('<textarea name="instructions" style="display:none;">this is a test textarea</textarea>');
        alert('Hideen Textarea Added.');
    });

});

Verifique o jsfiddle de trabalho aqui

Subodh Ghulaxe
fonte