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>

Instead of calling onClick on each box, you could use an event handler that's attached to the input type checkbox selector. jQuery makes this easy. — EmmyS
– EmmyS, Commented Nov 18, 2013 at 21:52
Possible duplicate: stackoverflow.com/questions/9963323/…. — EmmyS
– EmmyS, Commented Nov 18, 2013 at 21:53
Thanks. Sounds good, but I'm a bit lost on how to implement. — user3006087
– user3006087, Commented Nov 18, 2013 at 22:41

EmmyS · Accepted Answer · 2013-11-18 23:05:11Z

3

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.

answered Nov 18, 2013 at 23:05

EmmyS

12.2k49 gold badges104 silver badges161 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

EmmyS Over a year ago

@T.J.Crowder - his original code was using straight DOM stuff. jQuery was my suggestion, as it's easier to get a handle on a range of element names with partial selectors.

EmmyS Over a year ago

@T.J.Crowder - I mentioned jQuery in a comment initially. The OP requested info on how to implement.

T.J. Crowder Over a year ago

@EmmyS: Ah, perfect approach. (That's my +1, btw.)

user3006087 Over a year ago

What if my "copyfrom" field is within an iframe? How should I tweak the code to allow a checkbox on the parent page to trigger a copy from a "copyfrom" field within the iframe to a "copyto" field within the parent page? I tried a few suggestions from other posts but I couldn't get them to work. Thanks again!

T.J. Crowder · Accepted Answer · 2013-11-18 21:53:17Z

0

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"] (e.g,. 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).

edited Nov 18, 2013 at 21:53

answered Nov 18, 2013 at 21:46

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

1 Comment

user3006087 Over a year ago

Great, thanks. Would you mind showing how this would work with my jsfiddle?

Collectives™ on Stack Overflow

Javascript: multiple checkboxes calling one function

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related