在jQuery中从表单复制到表单 [英] Copying from form to form in jQuery
问题描述
我要求将所有字段从一个表单复制到另一个表单。因此，我不是逐字段地复制，而是使用jQuery编写了一个例程form2form。
I had a requirement to copy all fields from one form to another similar form. So instead of copying field by field I wrote a routine, form2form, using jQuery.
function form2form(aF1, aF2) {
var selection = "#" + aF1 + " .copy";
$(selection).each(function() {
document.forms[aF2].elements[$(this).attr('name')].value = $(this).val();
});
}
例程有效。例程要求在输入表单字段中有一类副本，否则我不知道如何获取表单中的所有字段。 （＃form：input）跳过单选按钮并选择字段。
the routine works. The routine requires that in input form field have a class of copy otherwise I don't know how to get all fields in the form. ("#form :input") skips the radio button and select fields.
所以我的问题是。
是否有内置功能，所以我不需要这个？
有没有更好的方法来编写选择？
如何修改例程而不需要该类。
我可以传递表单对象而不是表单名称作为文本吗？
一般来说有更好的方式吗？
Is there a built in function so I didn't need this? Is there a better way to write the selection? How do I modify the routine not to need the class. Can I pass form objects rather then the form name as a text? Is there a better way in general?
这是一个有效的完整页面：
this is a full page that works:
<!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>
推荐答案
>是否有内置功能，所以我没有'需要这个？
> Is there a built in function so I didn't need this?
不是真的。有 clone（） ，但这更多用于将元素复制到DOM中的另一个位置。您需要填充第二个表单。
Not really. There's clone(), but that's more for copying an element to another spot in the DOM. You need to populate a second form.
>我可以传递表单对象而不是表单名称作为文本吗？
> Can I pass form objects rather then the form name as a text?
是：
function form2form(formA, formB) {
$(':input[name]', formA).each(function() {
$('[name=' + $(this).attr('name') +']', formB).val($(this).val())
})
}
你也可以把它作为一个插件！
You can make it a plugin too!
(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伪选择器确实不要跳过收音机或选择输入。它明确包括选择和输入元素（至少在1.3.2中），其中收音机按钮是。
ps the ":input" pseudo selector does not skip radio or select inputs. It explicitly includes select and input elements (at least in 1.3.2), of which radio buttons are a part of.
这篇关于在jQuery中从表单复制到表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
