What would be the best way to copy input values from one form to another where the inputs in each form have the same name? I came up with the following, however, it seems terribly inefficient (I know, efficiency probably doesn't matter, but would still like to know). Thanks
将输入值从一个表单复制到另一个表单的最佳方法是什么?但是,我想到了下面这个问题,它看起来效率很低(我知道,效率可能并不重要,但我还是想知道)。谢谢
http://jsbin.com/beyixeqa/1/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#copy').click(function(){
var form1=$('#form1').find(':input');
var form2=$('#form2');
form1.each(function() {
var $t=$(this);
form2.find('[name="'+$t.attr('name')+'"]').val($t.val());
});
});
});
</script>
</head>
<body>
<button id="copy">copy</button>
<form id="form1">
<input name="a" type=text>
<input name="b" type=text>
<input name="c" type=text>
<input name="d" type=text>
</form>
<form id="form2">
<input name="a" type=text>
<input name="b" type=text>
<input name="c" type=text>
<input name="d" type=text>
</form>
</body>
</html>
2 个解决方案
#1
7
You don't need to clone or replace, just change the value
您不需要克隆或替换,只需更改值即可。
jQuery(function( $ ) {
function copyForms( $form1 , $form2 ) {
$(':input[name]', $form2).val(function() {
return $(':input[name=' + this.name + ']', $form1).val();
});
}
$('#copy').on('click', function() {
copyForms( $('#form1') , $('#form2') );
});
});
/*this demo only*/
body{display:flex;}form{padding:16px;background:#ddd;}form>*{box-sizing:border-box;width:100%;}
<form id=form1>
FORM
<input name=a type=text value="FOO">
<input name=b type=button value="BAR">
<textarea name=c>BAZ</textarea>
<select name=d>
<option value="a">a</option>
<option value="b" selected>b</option>
</select>
</form>
<button id="copy">COPY→</button>
<form id=form2>
HIDDEN FORM
<input name=a type=text>
<input name=b type=button value="...">
<textarea name=c></textarea>
<select name=d>
<option value="a">a</option>
<option value="b">b</option>
</select>
</form>
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
- By using
:input[name]
you're making sure to target only:input
s with aname
attribute - 通过使用:输入[名称],您只确定目标:带有name属性的输入。
-
$(':input[name]', form2)
= descendants of#form2
- $(':input[name], form2) = form2的后代。
- Using the
val
callback you can target every single one of the targeted inputs - 使用val回调可以针对每一个目标输入
- returning their values to be exactly as their referenced same-named-
:inputs
of#form1
- 返回它们的值与它们的引用完全相同:#form1的输入。
#2
2
You can use .clone() and .replaceWith()
可以使用.clone()和.replaceWith()
$('#copy').click(function(){
var newform2=$('#form1').clone(); //Clone form 1
newform2.filter('form').prop('id', 'form2'); //Update formID
$('#form2').replaceWith(newform2);
});
演示
#1
7
You don't need to clone or replace, just change the value
您不需要克隆或替换,只需更改值即可。
jQuery(function( $ ) {
function copyForms( $form1 , $form2 ) {
$(':input[name]', $form2).val(function() {
return $(':input[name=' + this.name + ']', $form1).val();
});
}
$('#copy').on('click', function() {
copyForms( $('#form1') , $('#form2') );
});
});
/*this demo only*/
body{display:flex;}form{padding:16px;background:#ddd;}form>*{box-sizing:border-box;width:100%;}
<form id=form1>
FORM
<input name=a type=text value="FOO">
<input name=b type=button value="BAR">
<textarea name=c>BAZ</textarea>
<select name=d>
<option value="a">a</option>
<option value="b" selected>b</option>
</select>
</form>
<button id="copy">COPY→</button>
<form id=form2>
HIDDEN FORM
<input name=a type=text>
<input name=b type=button value="...">
<textarea name=c></textarea>
<select name=d>
<option value="a">a</option>
<option value="b">b</option>
</select>
</form>
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
- By using
:input[name]
you're making sure to target only:input
s with aname
attribute - 通过使用:输入[名称],您只确定目标:带有name属性的输入。
-
$(':input[name]', form2)
= descendants of#form2
- $(':input[name], form2) = form2的后代。
- Using the
val
callback you can target every single one of the targeted inputs - 使用val回调可以针对每一个目标输入
- returning their values to be exactly as their referenced same-named-
:inputs
of#form1
- 返回它们的值与它们的引用完全相同:#form1的输入。
#2
2
You can use .clone() and .replaceWith()
可以使用.clone()和.replaceWith()
$('#copy').click(function(){
var newform2=$('#form1').clone(); //Clone form 1
newform2.filter('form').prop('id', 'form2'); //Update formID
$('#form2').replaceWith(newform2);
});
演示