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?

javascript jquery forms hidden-field Mithun Sreedharan
źródło

Odpowiedzi:

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