Question

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

Answer 1

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.net/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");