CODEWITHSUNDEEP
javascriptjqueryformsinputeach
Adam Wilson
Adam Wilson

Reputation: 81

Copy multiple input fields to other matching input fields with jQuery/Javascript

I have a dummy form and the actual form in which at some point I want to copy all the input values from the dummy form across to the real form. The dummy fields will have the same names as the real form (so I can match them up).

So in dummy form:

<input name="item1" value="field1" />
<input name="item2" value="field1" />
<input name="item3" value="field1" />

and in real form:

<input name="item1" value="" />
<input name="item2" value="" />
<input name="item3" value="" />

I assume I'll need to iterate over each input in dummy form (using jQuery .each() ?) while collecting the name and value in an JS object. Then iterate over each input in the real form, matching the name as the selector and setting the value (perhaps this can be done in the one .each() function ???)

I've started with the following code which only grabs the values (and index) into an array, but because I need two values (name and value, and index is irrelevant) I assume I'll need an object not an array, but really not sure where to begin with that. 

var inputValues = [];
    $("#dummyForm input").each(function() {
        inputValues.push($(this).val());
    });

Any help or advice much appreciated.

Upvotes: 0

Views: 1497

Answers (2)

Bla...
Bla...

Reputation: 7288

You could do something like below:

$('#dummy input').each(function(){
    if($('#real input[name='+$(this).prop('name')+']').length == 1)
        $('#real input[name='+$(this).prop('name')+']').val($('#dummy input[name='+$(this).prop('name')+']').val())
});

Here is my Fiddle...

Upvotes: 1

AmmarCSE
AmmarCSE

Reputation: 30557

Map them like

$('#DummyForm [name]').each(function() {
  var name = $(this).attr('name');
  $('#RealForm [name="' + name + '"]').val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<form id="DummyForm">
  <input name="item1" value="field1" />
  <input name="item2" value="field2" />
  <input name="item3" value="field3" />
</form>
<form id="RealForm">
  <input name="item1" value="" />
  <input name="item2" value="" />
  <input name="item3" value="" />
</form>

Upvotes: 2

Related Questions