jQuery - Tạo phần tử biểu mẫu ẩn khi đang di chuyển


Câu trả lời:


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

Để trả lời câu hỏi thứ hai của bạn:

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

56
Lưu ý rằng IE sẽ bị nghẹt nếu bạn cố gắng thay đổi loại đầu vào sau khi nó được tạo. Sử dụng $('<input type="hidden">').foo(...)như một cách giải quyết.
Roy Tinker

4
Ngoài ra, tài liệu jQuery gợi ý rằng vì thao tác DOM rất tốn kém, nếu bạn có nhiều đầu vào được thêm vào, hãy thêm tất cả chúng một lần bằng cách sử dụng cái gì đó như $ (this) .append (hidden_element_array.join (''));
Kedar Mhaswade

1
Tôi vừa thử phương pháp này với jQuery 1.6.2 và nhận được lỗi này với Firefox 7.0.1: "không thể thay đổi ngoại lệ: thuộc tính loại không thể thay đổi" Có vẻ như bạn không thể sử dụng phương thức attr để thay đổi thuộc tính loại trong các điều kiện này. Bây giờ tôi đang thử phương pháp bên dưới ...
Mikepote 11/11/11

Cách tiếp cận tương tự này có hoạt động với .propchức năng mới hơn trong bản phát hành API mới hơn không?
SpaceBison

3
@SpaceBison .propkhông phải là "cái mới .attr" như nhiều người nghĩ. Bạn vẫn nên sử dụng .attrđể đặt thuộc tính.
David Hellsing

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

1
Có ai kiểm tra câu trả lời này trên IE cũ không?
Arthur Halma

11
Cá nhân, tôi tin rằng đây là một cách tiếp cận tốt hơn nhiều so với câu trả lời được chấp nhận vì nó liên quan đến các lệnh gọi hàm / thao tác DOM ít hơn.
PaulSkinner

3
@PaulSkinner Đối với trường hợp cụ thể, có bạn đúng, nhưng không phải lúc nào cũng như vậy. Hãy xem tại đây stackoverflow.com/a/2690367/1067465
Fernando Silva

34

Giống như của David, nhưng không có attr ()

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

3
Có một tên cho cách điền thẻ này không?
DLF85

Làm thế nào để nối thêm đầu vào chỉ 1 lần? nếu nó tồn tại, nó tiếp tục nhập giá trị mới với cùng thuộc tính
Căn cứ tuyết

Rất tinh gọn, tôi thích nó.
Jacques

27

nếu bạn muốn thêm nhiều thuộc tính, chỉ cần làm như sau:

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

Hoặc là

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

Đây là lỗi console Unexpected identifier.
Prafulla Kumar Sahu

Mã thứ hai, dường như "id" cần được tạo một cách linh hoạt một cái gì đó như foo1, foo2, v.v.
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
Là gì 'name-as-seen-at-the-server'?
SaAtomic

1

Làm việc với JSFIDDLE

Nếu hình thức của bạn là như thế

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

Bạn có thể thêm đầu vào ẩn và textarea để tạo thành như thế này

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

});

Kiểm tra jsfiddle làm việc ở đây

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.