jQuery: crea un elemento de formulario oculto sobre la marcha

Respuestas:

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

Para responder a su segunda pregunta:

$('<input>').attr({
    type: 'hidden',
    id: 'foo',
    name: 'bar'
}).appendTo('form');
David Hellsing
fuente
56
Tenga en cuenta que IE se ahogará si intenta cambiar el tipo de entrada después de que se haya creado. Úselo $('<input type="hidden">').foo(...)como una solución alternativa.
Roy Tinker
44
Además, la documentación de jQuery sugiere que, dado que la manipulación del DOM es costosa, si tiene que agregar varias entradas, agréguelas todas una vez usando algo como $ (this) .append (hidden_element_array.join (''));
Kedar Mhaswade
1
Acabo de probar este método con jQuery 1.6.2 y recibí este error con Firefox 7.0.1: "excepción no capturada: la propiedad de tipo no se puede cambiar" Parece que no puede usar el método attr para cambiar la propiedad de tipo en estas condiciones. Ahora estoy probando el siguiente método ...
Mikepote
¿ .propFuncionará este mismo enfoque con la función más nueva en la versión API más reciente?
SpaceBison
3
@SpaceBison .propno es "lo nuevo .attr" como mucha gente parece pensar. Aún debe usar .attrpara establecer atributos.
David Hellsing
138 
$('#myformelement').append('<input type="hidden" name="myfieldname" value="myvalue" />');
Mark Bell
fuente
1
¿Alguien probó esta respuesta en IE antiguo?
Arthur Halma el
11
Personalmente, creo que este es un enfoque mucho mejor que la respuesta aceptada, ya que implica menos manipulación DOM / llamadas a funciones.
PaulSkinner
3
@PaulSkinner Para el caso dado, sí, tienes razón, pero no siempre es así. Echa un vistazo aquí stackoverflow.com/a/2690367/1067465
Fernando Silva el
34

Lo mismo que el de David, pero sin attr ()

$('<input>', {
    type: 'hidden',
    id: 'foo',
    name: 'foo',
    value: 'bar'
}).appendTo('form');
Sergey Onishchenko
fuente
3
¿Hay un nombre para esta forma de poblar una etiqueta?
DLF85
¿Cómo agregar la entrada solo 1 vez? si existe, sigue ingresando un nuevo valor con el mismo atributo
Snow Bases
Muy aerodinámico, me encanta.
Jacques
27

si desea agregar más atributos simplemente haga lo siguiente:

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

O

$('<input>').attr({
    type: 'hidden',
    id: 'foo',
    name: 'foo[]',
    value: 'bar'
}).appendTo('form');
Slipstream
fuente
Esto está dando error de consola Unexpected identifier.
Prafulla Kumar Sahu
Segundo código, parece que la necesidad de "id" que se genera dinámicamente algo así como foo1, etc foo2
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
fuente
2
¿Cuál es el 'name-as-seen-at-the-server'?
SaAtomic
1

JSFIDDLE de trabajo

Si tu forma es 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>

Puede agregar entradas ocultas y área de texto para formar así

$(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 jsfiddle de trabajo aquí

Subodh Ghulaxe
fuente