javascript 将输入值从一种形式复制到另一种形式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22015925/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Copy input values from one form to another
提问by user1032531
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
将输入值从一种形式复制到另一种形式的最佳方法是什么，其中每种形式的输入都具有相同的名称？我想出了以下内容，但是，它似乎非常低效（我知道，效率可能无关紧要，但仍然想知道）。谢谢
<!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>
回答by Roko C. Buljan
You don't need to clone or replace, just change the value
您不需要克隆或替换，只需更改 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:inputs with anameattribute $(':input[name]', form2)= descendants of#form2- Using the
valcallback you can target every single one of the targeted inputs - returning their values to be exactly as their referenced same-named-
:inputsof#form1
- 通过使用，
:input[name]您可以确保仅:input针对具有name属性的s $(':input[name]', form2)= 后代#form2- 使用
val回调，您可以针对每一个目标输入 - 返回它们的值是完全按照他们的引用同named-
:inputs的#form1
回答by Satpal
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);
});
