jQuery - Utwórz ukryty element formularza w locie

333

Jaki jest najprostszy sposób, aby dynamicznie utworzyć ukryte pole formularza wejściowego za pomocą jQuery?

613

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

Aby odpowiedzieć na drugie pytanie:

$('<input>').attr({
    type: 'hidden',
    id: 'foo',
    name: 'bar'
}).appendTo('form');

— David Hellsing
źródło

56

Zauważ, że IE dusi się, jeśli spróbujesz zmienić typ wejścia po jego utworzeniu. Użyj $('<input type="hidden">').foo(...)jako obejścia.

— Roy Tinker,

4

Ponadto dokumentacja jQuery sugeruje, że ponieważ manipulowanie DOM jest kosztowne, jeśli musisz dodać wiele danych wejściowych, dodaj je wszystkie raz, używając czegoś takiego jak $ (this) .append (hidden_element_array.join (''));

— Kedar Mhaswade

1

Właśnie wypróbowałem tę metodę z jQuery 1.6.2 i otrzymałem ten błąd w Firefoksie 7.0.1: „nieprzechwycony wyjątek: właściwości type nie można zmienić” Wygląda na to, że nie można użyć metody attr do zmiany właściwości type w tych warunkach. Próbuję teraz metody poniżej ...

— Mikepote

Czy to samo podejście będzie działać z nowszą .propfunkcją w nowszej wersji API?

— SpaceBison

3

@SpaceBison .propnie jest „nowy .attr”, jak się wydaje wielu osobom. Nadal powinieneś używać .attrdo ustawiania atrybutów.

— David Hellsing

138

$('#myformelement').append('<input type="hidden" name="myfieldname" value="myvalue" />');

— Mark Bell
źródło

1

Czy ktoś przetestował tę odpowiedź na starym IE?

— Arthur Halma

11

Osobiście uważam, że jest to znacznie lepsze podejście niż zaakceptowana odpowiedź, ponieważ wymaga mniej manipulacji DOM / wywołań funkcji.

— PaulSkinner,

3

@PaulSkinner W danym przypadku tak, masz rację, ale nie zawsze tak jest. Spójrz tutaj stackoverflow.com/a/2690367/1067465

— Fernando Silva

34

To samo co David, ale bez attr ()

$('<input>', {
    type: 'hidden',
    id: 'foo',
    name: 'foo',
    value: 'bar'
}).appendTo('form');

— Siergiej Onishchenko
źródło

3

Czy istnieje nazwa tego sposobu zapełniania tagu?

— DLF85,

jak dołączyć dane wejściowe tylko 1 raz? jeśli istnieje, to nadal wprowadza nową wartość z tym samym atrybutem

— Snow Bases

Bardzo usprawniona, uwielbiam to.

— Jacques

27

jeśli chcesz dodać więcej atrybutów, po prostu zrób tak:

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

Lub

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

— Slipstream
źródło

to powoduje błąd konsoli Unexpected identifier.

— Prafulla Kumar Sahu

Drugi kod, wydaje się, że „id” musi być generowany dynamicznie coś takiego jak foo1, foo2 itp.

— 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
źródło

2

Co to jest 'name-as-seen-at-the-server'?

— SaAtomic,

1

Działający JSFIDDLE

Jeśli twój formularz jest podobny

<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>

Możesz dodać ukryte dane wejściowe i obszar tekstowy w taki sposób

$(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.');
    });

});

Sprawdź działający jsfiddle tutaj

— Subodh Ghulaxe
źródło