Question

将输入值从一种形式复制到另一种形式的最佳方法是什么？每种形式的输入具有相同的名称？我想出了以下内容，然而，它似乎非常低效（我知道，效率可能并不重要，但仍然想知道）。感谢

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

您无需克隆或替换，只需更改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>

使用:input[name]，您确保定位仅 :input name属性
$(':input[name]', form2) = #form2
使用val回调，您可以定位每一个目标输入
将其值恢复为与:inputs

同名< - em> #form1完全相同

Answer 2

您可以使用.clone()和.replaceWith()

$('#copy').click(function(){
    var newform2=$('#form1').clone(); //Clone form 1
    newform2.filter('form').prop('id', 'form2'); //Update formID
    $('#form2').replaceWith(newform2);
});

DEMO

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

2 个答案: