title: Copy input values from one form to another
body: <p>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</p>
  
  <p><a href="http://jsbin.com/beyixeqa/1/">http://jsbin.com/beyixeqa/1/</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
          &lt;title&gt;Testing&lt;/title&gt;  
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt; 
              $(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());
                      });
                  });
  
              });
          &lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;button id="copy"&gt;copy&lt;/button&gt;
          &lt;form id="form1"&gt;
              &lt;input name="a" type=text&gt;
              &lt;input name="b" type=text&gt;
              &lt;input name="c" type=text&gt;
              &lt;input name="d" type=text&gt;
          &lt;/form&gt;
          &lt;form id="form2"&gt;
              &lt;input name="a" type=text&gt;
              &lt;input name="b" type=text&gt;
              &lt;input name="c" type=text&gt;
              &lt;input name="d" type=text&gt;
          &lt;/form&gt;
  
      &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>