将输入值从一种形式复制到另一种形式

Question

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

Answer 1

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&rarr;</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 a name attribute 通过使用:input[name]您确保仅定位 :input带有name属性的s
$(':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的引用的同名 - :inputs完全相同

Answer 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);
});

DEMO DEMO

将输入值从一种形式复制到另一种形式

问题描述

2 个解决方案

解决方案1
8 已采纳 2014-02-25 14:00:33

解决方案2
2 2014-02-25 13:47:44

将输入值从一种形式复制到另一种形式

问题描述

2 个解决方案

解决方案1 8 已采纳 2014-02-25 14:00:33

解决方案2 2 2014-02-25 13:47:44

解决方案1
8 已采纳 2014-02-25 14:00:33

解决方案2
2 2014-02-25 13:47:44