I'm trying to iterate over 3 forms, which contain a varying number of input boxes. Within each form, the input fields have the same class. What I need to do, is have a "replicate" button so that when this is pressed, it will copy the input from one field and copy it over to each one. Here is how things are currently setup:

<input type="button" class="replicate" />

<form class="1">
  <input class="1_size" /> <!--this is the one I want to copy to all other fields -->
</form>
<form class="1">
  <input class="1_size" />
</form>

<form class="2">
  <input class="2_size" />
</form>
<form class="2">
  <input class="2_size" />
</form>
<form class="2">
  <input class="2_size" />
</form>

<form class="3">
 <input class="3_size" />
</form>
<form class="3">
  <input class="3_size" />
</form>

So what I need to do [when the replicate button is pressed] is to iterate over each form and use the input from the first one (see the ment) and copy it to all the other inputs in all the other forms. Is this even possible? The reason that there are forms with same classes and inputs is because they have a "+" and "-" button

I'm using the jQuery library and I'm thinking I can do something like:

$(document).ready(function() {
    $('.1, .2, .3').each(function() {

    });
});

Could I then use something like .parents() or parent()? I'm a little stuck and not even sure if you can use an each() like this...hope I've explained this well!

I'm trying to iterate over 3 forms, which contain a varying number of input boxes. Within each form, the input fields have the same class. What I need to do, is have a "replicate" button so that when this is pressed, it will copy the input from one field and copy it over to each one. Here is how things are currently setup:

<input type="button" class="replicate" />

<form class="1">
  <input class="1_size" /> <!--this is the one I want to copy to all other fields -->
</form>
<form class="1">
  <input class="1_size" />
</form>

<form class="2">
  <input class="2_size" />
</form>
<form class="2">
  <input class="2_size" />
</form>
<form class="2">
  <input class="2_size" />
</form>

<form class="3">
 <input class="3_size" />
</form>
<form class="3">
  <input class="3_size" />
</form>

So what I need to do [when the replicate button is pressed] is to iterate over each form and use the input from the first one (see the ment) and copy it to all the other inputs in all the other forms. Is this even possible? The reason that there are forms with same classes and inputs is because they have a "+" and "-" button

I'm using the jQuery library and I'm thinking I can do something like:

$(document).ready(function() {
    $('.1, .2, .3').each(function() {

    });
});

Could I then use something like .parents() or parent()? I'm a little stuck and not even sure if you can use an each() like this...hope I've explained this well!

• javascript
• jquery
• forms

Share Improve this question Follow asked Jan 23, 2012 at 10:55 zikzik 3,0951111 gold badges4444 silver badges6363 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

try something like below, i consider that input type is text

$(document).ready(function() {
    $('input.replicate').click(function(){    
        var first_form = $('form:first');        
        $('form').not(first_form).each(function(){
          $(this).children('input:text').val(first_form.children('input:text').val());
        });
    });
});

Fiddle EXAMPLE : http://jsfiddle/raj_er04/DSzjX/

If you only have one "replicate" button you should probably give it an id rather than a class for selection purposes, but anyway, the following creates a click handler for that button which will select all inputs with a class attribute ending in "_size" except the first one, and assign the value from the first one:

$(document).ready(function(){
    $("input.replicate").click(function() {
        var inputs = $('input[class$="_size"]');
        inputs.not(":first").val( inputs.first().val() );
    });
});

Demo: http://jsfiddle/2bceZ/

Note that the selector I've used won't work if there are multiple classes assigned to the inputs - which there aren't in your example, but of course there could be in the finished product - so you might like to do something like this:

var inputs = $(".1,.2,.3").find("input");

If the first character of a classname (or ID) is a digit (like in your example), you’ll need to escape it (tool):

$('.\\31 '); // will select the element(s) with class="1"
$('.\\31 _size'); // will select the element(s) with class="1_size"

That said, dku.rajkumar’s answer had a good solution:

$('input.replicate').click(function() {    
  var $firstForm = $('form').first();
  $('form').not($firstForm).each(function() {
    $('input:text', this).val($('input:text', $firstForm).val());
  });
});