jQuery to populate array-named form fields based on first entered value where number of fields is unknown

Question

Greetings,

I have a form with a variable number of inputs, a simplified version of which looks like this:

<form>
<label for="same">all the same as first?</label>
<input id="same" name="same" type="checkbox" />
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value="" />
<input type="text" id="foo[3]" name="foo[3]" value="" />
<input type="text" id="foo[4]" name="foo[4]" value="" />
<input type="text" id="foo[5]" name="foo[5]" value="" />
</form>

The idea is to tick the #same checkbox and have jQuery copy the value from #foo[1] into #foo[2], #foo[3], etc. They also need to clear if #same is unchecked.

There can be any number of #foo inputs, based upon input from a previous stage of the form, and this bit is giving me trouble. I'm sure I'm missing something obvious, but I can't get any variation on $('#dest').val($('#source').val()); to work.

Help!

Answer 1

    $("input#same").click(function(){
      var checkBox = $(this);
       if (checkBox.attr("checked")){
         $("form input[name^=foo]").val($("input[name^=foo]:first").val());
        }else{
          $("form input[name^=foo]:not(:first)").val("");
        }
    }); 

EDIT: This code will only apply to input elements whose name starts with the string foo Example

Answer 2

jQuery will fail to select by id $('#foo[1]') since it includes [ and ], so I'm selecting the first element as $('[id=foo[1]]'). Then getting all next text boxes, then filtering them out if their id attribute does not match foo[<digits>], and then either applying the same value as the first one, or clearing them depending on the checkbox state.

example

$("#same").click(function() {
    var first = $('[id=foo[1]]');
    var next = first.nextAll(':text').filter(function() {
        return /foo\[\d+\]/.test(this.id);
    });
    if($(this).is(':checked')) {
        next.val(first.val());
    }
    else {
        next.val('');
    }   
});​

Although this works, it might just be easier to add classes such as first and rest to the HTML which would make things a lot easier.

<input id="same" name="same" type="checkbox" />
<input type="text" id="foo[1]" name="foo[1]" class="first" value="" />
<input type="text" id="foo[2]" name="foo[2]" class="rest" value="" />
<input type="text" id="foo[3]" name="foo[3]" class="rest" value="" />
<input type="text" id="foo[4]" name="foo[4]" class="rest" value="" />
<input type="text" id="foo[5]" name="foo[5]" class="rest" value="" />

The jQuery code then simplifies to:

$("#same").click(function() {
    if($(this).is(':checked')) {
        $('.rest').val($('.first').val());
    }
    else {
        $('.rest').val('');
    }   
});​

Answer 3

Perhaps something like this?

http://jsbin.com/anone3/2/edit