2009-09-16 7 views
5

में फॉर्म से फ़ॉर्म में कॉपी करने के लिए मुझे सभी फ़ील्ड को एक फॉर्म से दूसरे फॉर्म में कॉपी करने की आवश्यकता थी। तो क्षेत्र द्वारा क्षेत्र की प्रतिलिपि बनाने की बजाय मैंने jQuery का उपयोग करके एक नियमित, form2form लिखा था।jQuery से

function form2form(aF1, aF2) { 
var selection = "#" + aF1 + " .copy"; 
$(selection).each(function() { 
    document.forms[aF2].elements[$(this).attr('name')].value = $(this).val(); 
    });   
} 

नियमित कार्य। दिनचर्या की आवश्यकता है कि इनपुट फॉर्म फ़ील्ड में प्रतिलिपि की एक कक्षा हो अन्यथा मुझे नहीं पता कि फ़ॉर्म में सभी फ़ील्ड कैसे प्राप्त करें। ("#form: इनपुट") रेडियो बटन छोड़ देता है और फ़ील्ड का चयन करता है।

तो मेरे प्रश्न हैं।

क्या कोई फ़ंक्शन फ़ंक्शन है इसलिए मुझे इसकी आवश्यकता नहीं थी? क्या चयन लिखने का कोई बेहतर तरीका है? मैं कक्षा की आवश्यकता न करने के लिए नियमित रूप से कैसे संशोधित करूं? क्या मैं फॉर्म ऑब्जेक्ट्स को फॉर्म के रूप में फॉर्म नाम के रूप में पास कर सकता हूं? क्या सामान्य रूप से कोई बेहतर तरीका है?

यह है एक पूरा पृष्ठ है कि काम करता है:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>test form2form in jQuery</title> 
<script type="text/javascript" src="../scripts/jquery.js"></script></head> 
<script type="text/javascript"> 
function form2form(aF1, aF2) { 
var selection = "#" + aF1 + " .copy"; 
$(selection).each(function() { 
    document.forms[aF2].elements[$(this).attr('name')].value = $(this).val(); 
    });   
} 
function testform2form() { 
form2form ('form1', 'form2'); 
} 
</script> 
</head> 
<body> 
<h3>Copy form to form</h3> 
<form id="form1" name="form1"> 
form1: f1 <input type="text" name="f1" id="f1" class="copy" value="from A"/> 
f2 <input type="text" name="f2" id="f2" class="copy" value="from B" /> 
<select name="fruit" id="fruit" class="copy" > 
    <option value="valApple" selected="selected">Apple</option> 
    <option value="valOrange">Orange</option> 
</select> 
</form> 
<form id="form2" name="form2"> 
form1: f1 <input type="text" name="f1" id="f1" class="copy" value="target A" /> 
f2 <input type="text" name="f2" id="f2" class="copy" value="target B" /> 
<select name="fruit" id="fruit" class="copy" > 
    <option value="valApple">Apple</option> 
    <option value="valOrange" selected="selected">Orange</option> 
</select> 
</form> 
<p><a href="#" onclick="testform2form()">Copy Form to Form (form2form)</a></p> 
</body> 
</html> 

उत्तर

12

> समारोह में बनाया गया एक तो मैं इस जरूरत नहीं थी वहाँ है?

वास्तव में नहीं। clone() है, लेकिन यह एक तत्व को डीओएम में किसी अन्य स्थान पर कॉपी करने के लिए और अधिक है। आपको दूसरे फॉर्म को पॉप्युलेट करने की आवश्यकता है।

> क्या मैं फ़ॉर्म ऑब्जेक्ट को टेक्स्ट के रूप में फॉर्म नाम के रूप में पास कर सकता हूं?

हाँ:

function form2form(formA, formB) { 
    $(':input[name]', formA).each(function() { 
     $('[name=' + $(this).attr('name') +']', formB).val($(this).val()) 
    }) 
} 

आप इसे एक प्लगइन भी कर सकते हैं!

(function($) { 
    $.fn.copyNamedTo = function(other) { 
     return this.each(function() { 
      $(':input[name]', this).each(function() { 
       $('[name=' + $(this).attr('name') +']', other).val($(this).val()) 
      }) 
     }) 
    } 
}(jQuery)) 

ps ":input" छद्म चयनकर्ता रेडियो या चयन आदानों को छोड़ नहीं करता है। इसमें स्पष्ट रूप से select और input तत्व (कम से कम 1.3.2 में) शामिल हैं, जिनमें से radio बटन शामिल हैं।

+0

बस सोचा कि मुझे लगता है कि यह फ़ंक्शन काम करता है, लेकिन केवल तभी यदि आपके दूसरे फॉर्म में पहले से ही समान इनपुट हैं। मैंने गलत तरीके से इसका उपयोग करने का प्रयास किया और दूसरे इनपुट को कम करने के लिए इसका उपयोग करने की कोशिश की। – DMulligan

+0

चेकबॉक्स और रेडियो बटन को संभाल नहीं करता है –

1

मुझे इसे प्लगबॉक्स में चलाने के लिए प्लगइन में जोड़ना पड़ा।

$('[name=' + $(this).attr('name') +']', other).attr("checked", $(this).attr("checked")); 
संबंधित मुद्दे