jQuery

Question

के साथ फ़ॉर्म तत्वों को क्लोनिंग और नामकरण करना मैं एक ही पृष्ठ पर एकाधिक पते सबमिट करने की क्षमता प्रदान करने के लिए या तो क्लोन/नाम बदलने या फिर से बनाने के लिए एक प्रभावी तरीका ढूंढ रहा हूं। तो इस तरह के फार्म उदाहरण के साथ:

<div id="addresses"> 
    <div class="address"> 
    <input type="text" name="address[0].street"> 
    <input type="text" name="address[0].city"> 
    <input type="text" name="address[0].zip"> 
    <input type="text" name="address[0].state"> 
    </div> 
</div> 
<a href="" id="add_address">Add address form</a> 

मैं क्या समझ सकता है कि ऐसा करने के लिए दो विकल्प हैं से:

1. क्षेत्र द्वारा प्रपत्र क्षेत्र पुन: बनाएँ और सूचकांक जो एक तरह से वर्बोज़ है बढ़ाने के:

   var index = $(".address").length; 
   
   $('<`input`>').attr({ 
   name: 'address[' + index + '].street', 
   type: 'text' 
   }).appendTo(...); 
   
   $('<`input`>').attr({ 
   name: 'address[' + index + '].city', 
   type: 'text' 
   }).appendTo(...); 
   
   $('<`input`>').attr({ 
   name: 'address[' + index + '].zip', 
   type: 'text' 
   }).appendTo(...); 
   
   $('<`input`>').attr({ 
   name: 'address[' + index + '].state', 
   type: 'text' 
   }).appendTo(...); 
   

2. क्लोन मौजूदा परत और क्लोन में नाम बदल देते हैं:

   $("div.address").clone().appendTo($("#addresses")); 
   

आप कौन-सी अधिक कुशल जा रहा है के संदर्भ में है और यदि का उपयोग करते हुए अपने # 2 सुझाव कृपया कर सकते हैं कि कैसे मैं खोज के बारे में जाना होगा और जगह की [0] के साथ [1] ([n] सभी घटनाओं की सिफारिश करते हैं)। धन्यवाद।

Answer 1

सिद्धांत रूप में, सबसे आसान तरीका है तो क्लोन नाम बदलने के लिए होगा:

var newaddress= $("#addresses div.address").eq(0).clone(); 
newaddress.find('input').each(function() { 
    this.name= this.name.replace('[0]', '['+i+']'); 
}); 
$('#addresses').append(newaddress); 

हालांकि:

एक। jQuery का clone() काम का एक बहुत बुरा टुकड़ा है। आईई पर, यह नोड्स को एचटीएमएल में क्रमबद्ध करता है, एचटीएमएल स्ट्रिंग को रीजिक्स (!) के साथ अपने बॉज-जॉब आंतरिक आईडी विशेषताओं को हटाने के लिए प्रक्रिया करता है और फिर ब्राउज़र को फिर से पार्स करने के लिए कहता है। यह jQuery के मेरे कम से कम पसंदीदा हिस्सों में से एक है: यह अत्यधिक त्रुटि-प्रवण है, कुछ जानकारी खो देता है, और धीमा है (वह गति उस छोटी सी नौकरी के लिए महत्वपूर्ण नहीं है जो आप यहां कर रहे हैं)।

ब्राउज़र का मूल cloneNode(true) विधि बहुत बेहतर है, लेकिन यदि आप jQuery सामग्री कर रहे हैं तो आप वास्तव में इसका उपयोग नहीं कर सकते हैं क्योंकि यह jQuery की आंतरिक आईडी को कॉपी करेगा, संभावित रूप से इसकी स्क्रिप्टिंग को भ्रमित कर देगा। ओह। क्या झंझट है।

बी। जब आप इनपुट का नाम बदलते हैं, चाहे वह input.name है या आपके उदाहरण के रूप में attr() का उपयोग कर रहा है, तो IE < = 7 में समस्याएं हैं।

विशेष रूप से, हालांकि यह सही नियंत्रण नाम के साथ इनपुट जमा करेगा, उन्हें form.elements HTMLCollection (या form पर ही सही नाम के तहत अनुक्रमित नहीं किया जाएगा, हालांकि आपको इसका उपयोग नहीं करना चाहिए)। यदि आप पुराने स्कूल HTMLCollection इंटरफ़ेस की बजाय आईडी या jQuery चयनकर्ताओं के आधार पर इनपुट का चयन कर रहे हैं तो यह एक समस्या नहीं है। इससे भी बदतर यह है कि रेडियो बटन, यदि आप किसी का उपयोग करते हैं, तो ठीक से नाम-समूह नहीं किया जाएगा।

यदि यह आपके लिए चिंता का विषय है तो मुझे innerHTML/html() का उपयोग करके डर बनाने के लिए डर लगता है, जैसा कि पीएसटी के उत्तर में है, आपका एकमात्र विकल्प है। (आप हमेशा दो गठबंधन है, तो HTML का उपयोग कर text(), attr(), val() आदि का उपयोग कर सामान्य एचटीएमएल-भागने की समस्याओं से बचने के लिए जब आप के आसपास HTML में पाठ स्ट्रिंग्स चिपके जाने अन्य विशेषताओं और पाठ्य सामग्री को बदलने बनाने कर सकते हैं।)

Answer 2

यदि आप इसे लिखते हैं तो यह बहुत कम वर्बोज़ है :-) मैं शायद क्लोन का उपयोग करूँगा और संलग्न करूंगा। हालांकि, आपको डुप्लिकेट नाम मिलेंगे। यदि आपका बैक-एंड सही ढंग से "पता []। सड़क" को संभाल सकता है तो यह एक बड़ा सौदा नहीं है, लेकिन ऐसा नहीं हो सकता है और इस तरह के मामले में आपको क्लोन के बाद सफाई करना होगा। इस प्रकार मैं सलाह देता हूं कि "इसे एक साफ बिल्डर फ़ंक्शन में छिपाएं"।

function createAddress (index) { 
    return jQuery(replace('\ 
    <div class="address">\ 
     <input type="text" name="address[{i}].street">\ 
     <input type="text" name="address[{i}].city">\ 
     <input type="text" name="address[{i}].zip">\ 
     <input type="text" name="address[{i}].state">\ 
    </div>\ 
    ', {i: index})) 
} 

कहाँ की जगह कुछ साफ समारोह जो कि एक साधारण प्रक्षेप मानचित्रण समझता है। मैं "मार्कअप की तरह दिखने वाले किसी चीज़ में मार्कअप रखना" पसंद करता हूं।

यहां प्रदर्शन के बारे में चिंता करने की संभावना नहीं है।

Answer 3

मैं belive मैं एक ही बात के माध्यम से जा रहा हूँ और कुछ महान स्रोत है कि इस तरह से चला जाता है पाया:

<script type="text/javascript"> 
    function trimNums(stringToTrim) 
    { 
     return stringToTrim.replace(/\d+$/,""); 
    } 
    function dupForm(divId, divClass, btnAdd, btnRm) 
    { 
    //alert(divId+' '+divClass); 
     var num  = $(divClass).length; 
     var newNum = new Number(num + 1); 
     var i; 
     var newElem = $('#' + divId + num).clone().attr('id', divId + newNum).fadeIn('slow'); 
     for (i=0; i < newElem.children().length; i++) 
     { 
      var attrId = trimNums(newElem.children(':eq('+i+')').attr('id')); 
      var attrName = trimNums(newElem.children(':eq('+i+')').attr('name')); 
      newElem.children(':eq('+i+')').attr('id', attrId + newNum).val(''); 
     } 
     $('#' + divId + num).after(newElem); 
     $('#' + btnRm).attr('disabled',''); 
     if (newNum == 15) 
      $('#' + btnAdd).attr('disabled','disabled'); 
    } 
    function rmForm(divId, divClass, btnAdd, btnRm) 
    { 
     var num = $(divClass).length; 
     $('#' + divId + num).remove(); 
     $('#' + btnAdd).attr('disabled',''); 
     if (num-1 == 1) 
      $('#' + btnRm).attr('disabled','disabled'); 
    } 
</script> 

और html कोड है:

<form id="myForm" action="testingForm.php" method="post"> 
<div id="input1" style="margin-bottom:4px;" class="clonedInput"> 
    Part #: <input name="part[]" type="text" id="part1" size="10" maxlength="15" /> 
    Description: <input name="description[]" type="text" id="description1" size="30" maxlength="50" /> 
    Qty: <input name="quantity[]" type="text" id="quantity1" size="5" maxlength="5" /> 

....