jQuery - Створюйте прихований елемент форми на льоту


Відповіді:


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

Щоб відповісти на ваше друге запитання:

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

56
Зауважте, що IE задихнеться, якщо ви спробуєте змінити тип введення після його створення. Використовувати $('<input type="hidden">').foo(...)як вирішення.
Рой Тінкер

4
Крім того, документація jQuery передбачає, що оскільки маніпуляція з DOM є дорогою, якщо вам потрібно додати кілька входів, додайте їх усі один раз, використовуючи щось на зразок $ (this) .append (hidden_element_array.join (''));
Кедар Массваде

1
Я просто спробував цей метод з jQuery 1.6.2 і отримав цю помилку з Firefox 7.0.1: "виняток uncaught: властивість типу не можна змінити" Схоже, ви не можете використовувати метод attr для зміни властивості типу в цих умовах. Зараз я пробую метод нижче ...
Mikepote

Чи буде цей самий підхід працювати з новою .propфункцією у новій версії API?
SpaceBison

3
@SpaceBison .prop- це не «нове .attr», як багато людей, здається, думають. Ви все одно повинні використовувати .attrатрибути.
Девід Гелсінг

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

1
Хтось перевіряв цю відповідь на старому IE?
Артур Халма

11
Особисто я вважаю, що це набагато кращий підхід, ніж прийнята відповідь, оскільки він передбачає менше маніпуляцій / викликів функцій DOM.
PaulSkinner

3
@PaulSkinner Для даного випадку так, ви прав, але це не завжди так. Подивіться тут stackoverflow.com/a/2690367/1067465
Фернандо Сільва

34

Те саме, що і у Давида, але без attr ()

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

3
Чи існує назва цього способу заповнення тегу?
DLF85

як додати введення лише 1 раз? якщо існує, то продовжуйте вводити нове значення з тим самим атрибутом
Снігові бази

Дуже обтічна, я люблю це.
Жак

27

якщо ви хочете додати більше атрибутів просто так:

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

Або

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

це дає помилку консолі Unexpected identifier.
Прафула Кумар Саху

Другий код, здається, що "id" потрібно генерувати динамічно чимось на зразок foo1, 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');

2
Що таке 'name-as-seen-at-the-server'?
SaAtomic

1

Робочий JSFIDDLE

Якщо ваша форма схожа

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

Ви можете додати приховані введення та текстові області для такої форми

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

});

Перевірте тут jsfiddle

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.