Question

I have a form. Let’s called it myform.

Inside there are checkboxes, such as these two:

<input type='checkbox' name='power_convention[]' value='SOME VALUE #1' />
<input type='checkbox' name='power_evidence[]' value='SOME VALUE #2' />

At the end of the form, there’s a textarea.

<textarea id="elm1" name="comments" rows="15" cols="80" style="width: 80%">

If power_convention is checked, I want it to immediately append the value of that checkbox into the comments checkbox with the following structure:

<h3>SOME VALUE #1</h3><br />

Similarly, if power_evidence is clicked, I want it to do the same thing, but obviously after whatever came before it.

How would I go about doing this?

Thanks!

Answer 1

A jQuery solution:

$('input[type="checkbox"]').change(function() {
    var val = "<h3>" + this.value + "</h3><br />";
    if(this.checked) {
        $('#elm1').val(function(i, v) {
            return v + val;
        });
    }
    else {
        $('#elm1').val(function(i, v) {
            return v.replace(new RegExp(val), '');
        });
    }
});

DEMO

This only works if val does not contain any special regular expressions characters. In this case you would have to escape them.

Update: Actually, you don’t need a regular expression here, v.replace(val, '') will be just fine (thanks @Pinkie);

An alternative to regular expressions would be to recreate the content of the textarea:

var $inputs = $('input[type="checkbox"]');
$inputs.change(function() {
    var val = "<h3>" + this.value + "</h3><br />";
    if(this.checked) {
        $('#elm1').val(function(i, v) {
            return v + val;
        });
    }
    else {
        $('#elm1').val('');
        $inputs.not(this).change();
    }
});

DEMO 2