jQuery - สร้างองค์ประกอบแบบฟอร์มที่ซ่อนอยู่ได้ทันที


333

วิธีที่ง่ายที่สุดในการสร้างฟิลด์แบบฟอร์มการป้อนข้อมูลที่ซ่อนอยู่แบบไดนามิกโดยใช้ jQuery คืออะไร?

คำตอบ:


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

ในการตอบคำถามที่สองของคุณ:

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

56
โปรดทราบว่า IE จะทำให้หายใจไม่ออกหากคุณพยายามเปลี่ยนประเภทอินพุตหลังจากที่สร้างขึ้น ใช้$('<input type="hidden">').foo(...)เป็นวิธีแก้ปัญหา
Roy Tinker

4
นอกจากนี้เอกสาร jQuery แนะนำว่าเนื่องจากการจัดการ DOM มีราคาแพงถ้าคุณมีหลายอินพุตที่จะเพิ่มให้เพิ่มทั้งหมดของพวกเขาเมื่อใช้บางสิ่งบางอย่างเช่น $ (นี้). ผนวก (hidden_element_array.join (''));
Kedar Mhaswade

1
ฉันเพิ่งลองวิธีนี้ด้วย jQuery 1.6.2 และรับข้อผิดพลาดนี้กับ Firefox 7.0.1: "ข้อยกเว้นที่ไม่ได้ตรวจสอบ: ไม่สามารถเปลี่ยนคุณสมบัติประเภท" ดูเหมือนว่าคุณไม่สามารถใช้วิธี attr เพื่อเปลี่ยนคุณสมบัติประเภทภายใต้เงื่อนไขเหล่านี้ ตอนนี้ผมกำลังพยายามที่วิธีการดังต่อไปนี้ ...
Mikepote

วิธีการเดียวกันนี้จะทำงานกับ.propฟังก์ชันที่ใหม่กว่าใน API รุ่นใหม่กว่านี้หรือไม่
SpaceBison

3
@ SpaceBison .propไม่ใช่ "ของใหม่.attr" อย่างที่หลายคนคิด คุณยังควรใช้.attrเพื่อตั้งค่าคุณสมบัติ
David Hellsing

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

1
มีคนทดสอบคำตอบนี้ใน IE เก่าหรือไม่?
Arthur Halma

11
โดยส่วนตัวฉันเชื่อว่านี่เป็นวิธีที่ดีกว่าคำตอบที่ยอมรับเนื่องจากเกี่ยวข้องกับการเรียกใช้การจัดการ / ฟังก์ชั่น DOM น้อยกว่า
PaulSkinner

3
@ PaulSkinner สำหรับกรณีที่กำหนดใช่คุณถูกต้อง แต่ก็ไม่ได้เป็นเช่นนั้นเสมอไป ลองดูที่นี่stackoverflow.com/a/2690367/1067465
Fernando Silva

34

เหมือนกับ David แต่ไม่มี attr ()

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

3
มีชื่อสำหรับวิธีการเติมแท็กนี้หรือไม่?
DLF85

วิธีการเพิ่มอินพุตต่อ 1 ครั้งเท่านั้น หากมีอยู่มันจะป้อนค่าใหม่ด้วยแอตทริบิวต์เดียวกัน
Snow Bases

คล่องตัวมากฉันรักมัน
Jacques

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นี้จะให้ข้อผิดพลาดคอนโซล
Prafulla Kumar Sahu

โค้ดที่สองดูเหมือนว่าต้องมีการสร้าง "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>

คุณสามารถเพิ่มอินพุตและ textarea ที่ซ่อนไว้ให้อยู่ในรูปแบบนี้

$(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ที่ใช้งานได้ที่นี่

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.