jQuery - Membuat elemen formulir tersembunyi dengan cepat

333

Apa cara paling sederhana untuk secara dinamis membuat bidang formulir input tersembunyi menggunakan jQuery?

javascript jquery forms hidden-field Mithun Sreedharan
sumber

Jawaban:

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

Untuk menjawab pertanyaan kedua Anda:

$('<input>').attr({
    type: 'hidden',
    id: 'foo',
    name: 'bar'
}).appendTo('form');
David Hellsing
sumber
56
Perhatikan bahwa IE akan tersedak jika Anda mencoba mengubah tipe input setelah itu dibuat. Gunakan $('<input type="hidden">').foo(...)sebagai solusi.
Roy Tinker
4
Juga, dokumentasi jQuery menunjukkan bahwa karena manipulasi DOM mahal, jika Anda memiliki beberapa input untuk ditambahkan, tambahkan semuanya sekali menggunakan sesuatu seperti $ (ini). Append (hidden_element_array.join (''));
Kedar Mhaswade
1
Saya baru saja mencoba metode ini dengan jQuery 1.6.2 dan menerima kesalahan ini dengan Firefox 7.0.1: "pengecualian tanpa tertangkap: tipe properti tidak dapat diubah" Tampaknya Anda tidak dapat menggunakan metode attr untuk mengubah tipe properti dalam kondisi ini. Saya sekarang mencoba metode di bawah ini ...
Mikepote 11/11
Akankah pendekatan yang sama ini bekerja dengan .propfungsi yang lebih baru di rilis API yang lebih baru?
SpaceBison
3
@ SpaceBison .propbukan "baru .attr" karena banyak orang tampaknya berpikir. Anda masih harus menggunakan .attruntuk mengatur atribut.
David Hellsing
138 
$('#myformelement').append('<input type="hidden" name="myfieldname" value="myvalue" />');
Mark Bell
sumber
1
Apakah seseorang menguji jawaban ini pada IE lama?
Arthur Halma
11
Secara pribadi, saya percaya ini adalah pendekatan yang jauh lebih baik daripada jawaban yang diterima karena melibatkan lebih sedikit manipulasi / panggilan fungsi DOM.
PaulSkinner
3
@ PaulSkinner Untuk kasus yang diberikan, ya Anda benar, tetapi tidak selalu demikian. Lihat di sini stackoverflow.com/a/2690367/1067465
Fernando Silva
34

Sama seperti milik David, tetapi tanpa attr ()

$('<input>', {
    type: 'hidden',
    id: 'foo',
    name: 'foo',
    value: 'bar'
}).appendTo('form');
Sergey Onishchenko
sumber
3
Apakah ada nama untuk cara mengisi tag ini?
DLF85
bagaimana cara menambahkan input hanya 1 kali? jika ada, ia terus memasukkan nilai baru dengan atribut yang sama
Snow Bases
Sangat ramping, saya menyukainya.
Jacques
27

jika Anda ingin menambahkan lebih banyak atribut lakukan saja seperti:

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

Atau

$('<input>').attr({
    type: 'hidden',
    id: 'foo',
    name: 'foo[]',
    value: 'bar'
}).appendTo('form');
Slipstream
sumber
ini memberikan kesalahan konsol Unexpected identifier.
Prafulla Kumar Sahu
Kode kedua, sepertinya "id" perlu dibuat secara dinamis seperti foo1, foo2 dll
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
sumber
2
Apa itu 'name-as-seen-at-the-server'?
SaAtomic
1

Bekerja JSFIDDLE

Jika formulir Anda seperti 

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

Anda dapat menambahkan input dan textarea tersembunyi ke formulir seperti ini

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

});

Lihat jsfiddle yang berfungsi di sini

Subodh Ghulaxe
sumber