jQuery: crea un elemento de formulario oculto sobre la marcha

333

¿Cuál es la forma más sencilla de crear dinámicamente un campo de formulario de entrada oculto usando jQuery?

— Mithun Sreedharan
fuente

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