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?

— Mithun Sreedharan
fonte

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