CODEWITHSUNDEEP
javascriptjqueryhtml
Dolo
Dolo

Reputation: 976

Auto populate the textbox value with values checked in checkboxes but retain the values that are manually entered

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="[email protected]" />
  <input id="Checkbox3" type="checkbox" value="[email protected]" />
  <input id="Checkbox4" type="checkbox" value="[email protected]" />
  <input id="Checkbox5" type="checkbox" value="[email protected]" />

</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?

Upvotes: 2

Views: 2926

Answers (2)

lmortenson
lmortenson

Reputation: 1605

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();
});

Upvotes: 2

Kushal
Kushal

Reputation: 3168

There you go....

$(function () {
    txtbox = $("#txtbox");
    var prevVal;
    $("input[type='checkbox']").click(function() {
        prevVal = txtbox.val();
        if($(this).is(":checked"))
        {
            txtbox.val(prevVal + $(this).val() + ", ");
        }
        else
        {
            prevVal = prevVal.replace($(this).val()+", ", "");
            txtbox.val(prevVal);
        }
    });
});

One note of caution on your existing code, you're querying the DOM too much (iterating over checkboxes on every check made), don't do that. Also, why you use document.getElementById when you have JQuery available? :-) this may not be a perfect solution, but works!!

Upvotes: 1

Related Questions