從窗體複製到jQuery形式

我有一個要求將所有字段從一個窗體複製到另一個窗體。因此，我沒有按字段複製字段，而是使用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：input」）跳過單選按鈕並選擇字段。

所以我的問題是。

是否有內置的功能，所以我不需要這個？有沒有更好的方式來編寫選擇？如何修改例程不需要該類。我可以傳遞表單對象而不是表單名稱作爲文本嗎？總體上有更好的方法嗎？

這是一個整版的作品：

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

來源

2009-09-16 sdfor

>是否有一個內置的功能，所以我並不需要這個？

不是。有clone()，但這更多的是將元素複製到DOM中的另一個位置。你需要填充第二個表單。

>我可以傳遞表單對象而不是表單名稱作爲文本嗎？

是：

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按鈕是其中的一部分。

來源

2009-09-17 01:57:58

只是想我會注意到這個功能的作品，但只有當你的第二種形式已經有相同的投入。我誤讀並試圖用這種方式填充第二種形式，缺乏第一種形式的輸入。 – DMulligan 2011-12-13 20:59:26

不處理複選框和單選按鈕 – 2014-07-14 07:45:59

我不得不將這添加到插件才能讓它運行復選框。

$('[name=' + $(this).attr('name') +']', other).attr("checked", $(this).attr("checked"));

來源

2011-11-09 18:21:57 Flobi

從窗體複製到jQuery形式

回答

相關問題