Checkbox values to textfield using JQuery & Greasemonkey

Question

Hi all,

I have a setup looking like this:

<div id="problem">
    <table id="incident">
        <tr>
            <td><input type="checkbox" value="value1"></td><td>value1</td>
            <td><input type="checkbox" value="value2"></td><td>value2</td>
        </tr>
    </table>
</div>
...
<input type="text" value="" id="textfield_a01" maxlength="254"/>

What im trying to do, using JQuery & Greasemonkey, is to put each value from each checkbox that has been checked into the textfield. And if the checkbox get's unchecked, remove that value.

Right now, i have been working on something like this.

$(document).ready(function(){

    function updateTextfield() {
        var vals = [];

        $('#incident :checked').each(function() {
            vals.push($(this).val());
         });

         $('#textfield_a01').val(vals)
    }

    $(function() {
        $('#incident input').click(updateTextfield);
        updateTextfield();
    });
});

But yes, it's not working, im thinking it might be because of the fact that checkboxes are inside a table, but im not quite sure. Any hints/recommendations on where to look is great, thanks in advance.

Answer 1

Why don't you just collect all the information and put it into the input field at the end on submit? That way you wouldn't have to add and remove it all...

Otherwise, you could consider creating an array to store each of the checked values (removing the array item when it is removed), and every time any input is changed, clear and write a toString version of the array into the input?