Question

I used the jquery below to auto populate a textbox based on values of checked or unchecked check boxes

function updateTextArea() {
        var allVals = [];

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

        document.getElementById('txtbox').value = allVals;
    }
    $(function () {
        $('#all input').click(updateTextArea);
        updateTextArea();
    });

and my html code is

<div id="all">
<input id="txtbox" type="text" Height="100px"  Width="770px"  />   
  <input id="Checkbox2" type="checkbox" value="[e-mail]" />
  <input id="Checkbox3" type="checkbox" value="[e-mail]" />
  <input id="Checkbox4" type="checkbox" value="[e-mail]" />
  <input id="Checkbox5" type="checkbox" value="[e-mail]" />

</div>

The above jquery works wells for every check and uncheck events of checkboxes and populating its values to textbox separated by comma, My issue is if someone manually enters some email separated by comma in the above textbox I want that value to be retained and not to be refreshed for the check and uncheck events of my check box. How can I achieve this?

Answer 1

The general technique that I would use to solve this is:

On every check or uncheck:
1. Split the list by comma into an array.
2. Gather all preset email values that are checked (you’re doing this already).
3. Find every split value that isn’t in the preset array, and set it aside.
4. Insert all your checked preset values, and then add in all the oddballs, or vice versa.

This doesn’t preserve order, but it does retain any manually entered values. Retaining order could be done but would be a little more tricky.

You might also consider just having a separate “additional email” text box which would reduce the complexity of this and potentially make it more intuitive for the user.

Code:

function updateTextArea() {
    var allVals = [];
    var checkedVals = [];

    $('#all input[type=checkbox]').each(function () {
        allVals.push($(this).val());
    });

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

    var potentialOtherEmails = $("#txtbox").val().split(",");
    var confirmedOtherEmails = [];
    $(potentialOtherEmails).each(function(index,value) {
        if ($.inArray(value, allVals) == -1) {
            confirmedOtherEmails.push(value);
        }
    });

    $("#txtbox").val($.merge(checkedVals,confirmedOtherEmails));    
}

$(function () {
    $('#all input').click(updateTextArea);
    updateTextArea();
});