Question

140

Copy input values from one form to another

rated 0 times [ 145] [ 5] / answers: 1 / hits: 21072 / 10 Years ago, tue, february 25, 2014, 12:00:00

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/

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

marisela

Add To Favorites

Follow

Total Points: 103

Total Questions: 105

Total Answers: 102

Location: Solomon Islands

Member since Fri, Oct 8, 2021

3 Years ago

marisela questions

1 Access to XMLHttpRequest at '…' from origin 'localhost:3000' has been blocked by CORS policy

Wed, Aug 25, 21, 00:00, 3 Years ago

1 How to escape double and single quotes in a JSON array

Wed, Oct 21, 20, 00:00, 4 Years ago

1 TypeError: Cannot read property 'contentWindow' of undefined

Sat, Aug 15, 20, 00:00, 4 Years ago

1 Jest import statement: 'TypeError: Cannot set property 'fillStyle' of null'

Sun, Aug 2, 20, 00:00, 4 Years ago

1 Validation using Yup to check number length

Tue, Nov 19, 19, 00:00, 5 Years ago

View All

answered 10 Years ago shaynelandenb · Accepted Answer

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

$(':input[name]', form2) = descendants of #form2

Using the val callback you can target every single one of the targeted inputs

returning their values to be exactly as their referenced same-named- :inputs of #form1