将输入值从一个表单复制到另一个表单。

时间:2022-09-24 18:48:19

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>

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&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 :inputs with a name 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);
});

DEMO

演示

#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&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 :inputs with a name 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);
});

DEMO

演示