jQuery - मक्खी पर छिपा हुआ फार्म तत्व बनाएं

Question

JQuery का उपयोग करके छिपे हुए इनपुट फॉर्म फ़ील्ड को गतिशील रूप से बनाने का सबसे सरल तरीका क्या है ?

Answer 1

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

अपने दूसरे प्रश्न का उत्तर देने के लिए:

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

Comments

ध्यान दें कि यदि आप इनपुट प्रकार को बनाने के बाद उसे बदलने का प्रयास करते हैं तो IE चोक कर देगा। $('<input type="hidden">').foo(...)वर्कअराउंड के रूप में उपयोग करें ।

— रॉय टिंकर

इसके अलावा, jQuery के दस्तावेज़ीकरण से पता चलता है कि चूंकि DOM हेरफेर महंगा है, यदि आपके पास कई इनपुट जोड़े जाने हैं, तो $ (यह) .append (hidden_element_array.join ('')) का उपयोग करके सभी को एक बार जोड़ें;

— केदार म्हसवडे

मैंने अभी इस विधि को jQuery 1.6.2 के साथ आजमाया और फ़ायरफ़ॉक्स 7.0.1 के साथ इस त्रुटि को दूर किया: "बिना किसी अपवाद के: टाइप संपत्ति को बदला नहीं जा सकता है" ऐसा लगता है कि आप इन शर्तों के तहत टाइप संपत्ति को बदलने के लिए attr विधि का उपयोग नहीं कर सकते। मैं अब नीचे की विधि की कोशिश कर रहा हूँ ...

— माइकपोटे

क्या यह वही दृष्टिकोण .propनए एपीआई रिलीज में नए फ़ंक्शन के साथ काम करेगा ?

— स्पेसबिसन

@SpaceBison .prop"नया .attr" नहीं है क्योंकि बहुत से लोग सोचते हैं। आपको अभी भी .attrविशेषताएँ सेट करने के लिए उपयोग करना चाहिए ।

— डेविड हेलिंग

Answer 2

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

Comments

क्या किसी ने पुराने IE पर इस जवाब का परीक्षण किया?

— आर्थर हलामा

व्यक्तिगत रूप से, मेरा मानना ​​है कि यह स्वीकृत उत्तर की तुलना में बहुत बेहतर दृष्टिकोण है क्योंकि इसमें कम डोम हेरफेर / फ़ंक्शन कॉल शामिल हैं।

— पॉलस्किनर

@PaSSkinner दिए गए मामले के लिए, हाँ आप सही हैं, लेकिन यह हमेशा ऐसा नहीं है। यहां एक नज़र डालें stackoverflow.com/a/2690367/1067465

— फर्नांडो सिल्वा

Answer 3

डेविड के रूप में ही है, लेकिन बिना attr ()

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

Comments

क्या टैग को पॉप्युलेट करने के इस तरीके का कोई नाम है?

— DLF85

केवल 1 बार इनपुट कैसे जोड़ा जाए? यदि इसका अस्तित्व है तो यह समान गुण के साथ नए मूल्य में प्रवेश करता रहता है

— स्नो बेसिस

बहुत सुव्यवस्थित, मैं इसे प्यार करता हूँ।

— जैक्स

Answer 4

यदि आप अधिक विशेषताओं को जोड़ना चाहते हैं, जैसे कि:

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

या

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

Comments

यह कंसोल एरर दे रहा है Unexpected identifier।

— प्रफुल्ल कुमार साहू

दूसरा कोड, लगता है कि "आईडी" को foo1, foo2 आदि जैसे गतिशील रूप से उत्पन्न करने की आवश्यकता है

— Web_Developer

Answer 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');

Comments

क्या है 'name-as-seen-at-the-server'?

— साओटॉमिक

Answer 6

वर्किंग 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 की जाँच करें