Add/Remove values from textbox on checkbox click.

[MrPeds]

Hi,

Another newbie question please.

I have an HTML table that contains a number of checkbox's, each checkbox has a unique value.

I also have a textbox on the page as well.

Basically, i am trying to think of a way of appending the value of the checkbox to the textbox. Similarly, if the checkbox is deselected I want to be able to remove the value for that checkbox from the textbox. I am thinking of a comma separated list.

For example, if I have four checkboxs, their values will be 1, 2, 3, and 4.

when the page first loads, the textbox will be empty.

If I click on checkbox 1, the value of the textbox will be:

1

If i click on checkbox 4, the textbox becomes :

1,4

If I click on checkbox 3, the textbox becomes:

1,4,3

If i click on checkbox 4 again the value is removed and the textbox is:

1,3

and so on.

I know I need the onClick event of the checkbox to fire, but not sure about teh code for adding / removing the value from the list.

ANy help is appreciated.

MrPeds

 

[trollacious]

It'd be best if you showed us your REAL code rather than this contrived example. That way we can see any details in the real thing that we might miss with what you've provided now.

Lee

 

[MrPeds]

I have done the following code, and it seems to work, not sure if it can be made more efficient though:

function fnChkBoxChange(nItem)
{
var varray ;
var iGoalID;
var strBoxText = "";
var length = 0;
iGoalID = nItem.value ;
strBoxText = document.getElementById('txtMyBox').value ;

if ( nItem.checked == true )
{
strBoxText = strBoxText + "," + iGoalID;
if( strBoxText.charAt(0) == "," )
{
length = strBoxText.length;
strBoxText = strBoxText.substring(1);
}
document.getElementById('txtMyBox').value = strBoxText;
}
else
{

strBoxText = strBoxText.replace(iGoalID, "") ;
strBoxText = strBoxText.replace(/,,/, ",") ;
if ( strBoxText.charAt(0) == "," )
{
length = strBoxText.length;
strBoxText = strBoxText.substring(1);
}
if ( strBoxText.charAt( strBoxText.length - 1) == ",")
{
strBoxText = strBoxText.substring(0, strBoxText.length - 1);
}
document.getElementById('txtMyBox').value = strBoxText;
}
}

 

[trollacious]

The only change I'd make is to assign a variable to the textbox rather than use document.getElementById() twice:

var textbox = document.getElementById('txtMyBox');
strBoxText = textbox.value;

/*
other code here
*/

textbox.value = strBoxText;

That MIGHT speed the code up slightly, nothing significant, though.

Since you have 2 identical statements to assign the modified string to the text box, I'd remove them both from where they are and put a single assignment statement as the last line of the function.

Other than that, it all looks good to me.

Lee