Javascript: multiple checkboxes calling one function

Question

I have several text boxes in my form. I would like to place a checkbox next to each text box. If I check the box I would like the contents of the corresponding text box to be copied into one big text area (Big Text Area). For example, if I type "apples" into textbox#1 and click the checkbox next to textbox#1, I would like "apples" to be copied to the Big Text Area; then if I type "oranges" into textbox#2 I would like "oranges" to be copied into the Big Text Area and append apples, so the Big Text Area would contain "apples oranges".

I can accomplish the above if I manually type the field names into the function, but this is cumbersome. I would like to have a simple script that changes depending on which input/checkbox calls it.

In the below script the text area named "copyto" is my big text area that I wish to copy into.Upon checking the box under Copy From#1, the function currently copies the text from this box into the "copyto" text area. However, upon checking the box under Copy From#2 I need the function to change to allow copying of the contents of the Copy From#2 box into the "copyto" text area.

here is the jsfiddle to the below: http://jsfiddle.net/33RLk/

<script>
function Copy(f) {
if(f.copyfrom1.checked == true) {
f.copyto.value += '\n' + f.copyfrom.value;

}
}
</script>

<form>
Copy From #1:
<input type="text" name="copyfrom">
<br>
<input type="checkbox" name="copyfrom1" onclick="Copy(this.form)">
<em>Check to copy "Copy From #1" box to "Copy to" box.</em>
<P>
<br>

Copy From #2:
<input type="text" name="copyfromtwo">
<br>
<input type="checkbox" name="copyfrom2" onclick="Copy(this.form)">
<em>Check to copy "Copy From #2" box to "Copy to" box.</em>
<P>
<br>
Copy to:
<textarea name="copyto" cols="25" rows="4">Text</textarea>

</form>

Answer 1

Using jQuery:

Note the naming/id'ing of the various form elements.

<form>
Copy From #1:
<input type="text" id="copyfrom_1">
<br>
<input type="checkbox" name="copyFrom" id="check_copyfrom_1">
<em>Check to copy "Copy From #1" box to "Copy to" box.</em>
<P>
<br>

Copy From #2:
<input type="text" id="copyfrom_2">
<br>
<input type="checkbox" name="copyFrom" id="check_copyfrom_2">
<em>Check to copy "Copy From #2" box to "Copy to" box.</em>
<P>
<br>
Copy to:
<textarea id="copyto" cols="25" rows="4">Text</textarea>

</form>

Then, using jQuery selectors, we can use a single function to look at any number of checkbox/text field pairs:

// this selector finds any items whose id starts with `check_`
$('[id^=check_]').click(function() {
    // this next line will get the number of the text field/checkbox pair to 
    // look at (copyfrom_1/check_copyfrom_1, etc.)
    var idx = $(this).attr('id').split('_').pop();
    var copyTo = $('#copyto');

    // now check to see if the current state of the box is checked or unchecked
    if($('#check_copyfrom_'+idx).is(':checked')){
        // if it's checked, append the value to the textarea
        copyTo.val(copyTo.val() + $('#copyfrom_'+idx).val());
    }    
})

If you want it to remove previously-appended text if the user unchecks a box, you'll have a bit more work to do, but this should get you started.

Here's a fiddle .

Answer 2

Change your onclick so you just pass this , not this.form :

onclick="Copy(this)"

Now you have a reference to the input[type="checkbox"] element. You can use its previousSibling and nextSibling properties (possibly in a loop) to find the input[type="text"] in front of it and the textarea that's a child of one of its "next" siblings.

With the markup you've quoted, assuming Copy accepts a reference to the input[type="checkbox"] (eg,. you're passing this ), then:

function Copy(checkbox) {
    var textInput;
    var textArea;

    textInput = checkbox.previousSibling.previousSibling; // Have to skip the <br>
    textArea = checkbox.nextSibling.nextSibling.getElementsByTagName('textarea')[0];

    // Now copy the value from textInput to textArea
}

This gets a lot easier, though, if you put each group of these in some kind of container (say, a div ), because then you can use parentNode (possibly repeatedly) until you get to the div , then either getElementsByTagName or (on modern browsers ) querySelector to find the relevant elements within the div in a more robust way. ( querySelector finds the first element within the element you call it on that matches the CSS selector you pass into it).