Help please! Checkboxes etc.

**weirdbeardmt** · Aug 31, 2003 09:00

Hey,

I need a really simple JS script, but I'm having a blonde day.

Basically, I need to have a load of checkboxes, and if they are clicked, they simply add the value of the checkbox to a text input form to create a comma separated list.

This is what I started with, until I realised there is a better way to do this - to ask a JS guru at SPF!

Code:

<script language="Javascript">

function addTo() {

swatches.list.value = swatches.id.value + ',';


}

</script>

<form name="swatches">
<input type="checkbox" id="1"  value="1" onClick="addTo()">1
<input type="checkbox" name="2" value="2">2
<input type="checkbox" name="3" value="3">3
<input type="checkbox" name="4" value="4">4
<input type="checkbox" name="5" value="5">5
<input type="checkbox" name="6" value="6">6

<input type="text" name="list">
</form>

It sorta works, but not as it should. Someone wanna sort me out?

**Vincent Puglia** · Aug 31, 2003 09:06

Hi,
Your quick reply solution:

Code:

function addTo(boxVal) {
swatches.list.value += parseInt(boxVal) + ',';
}
<input type="checkbox" id="1"  value="1" onClick="addTo(this.value)">1

Vinny

**weirdbeardmt** · Aug 31, 2003 09:13

Cool bananas. How about if they uncheck the checkbox?

**Vincent Puglia** · Aug 31, 2003 09:58

Hi,

Code:

function addTo(boxObj) {
var listObj = swatches.list;
var boxVal = boxObj.value;
if (boxObj.checked)
   listObj.value += parseInt(boxVal) + ',';
else
   {
	 strLen = boxVal.length + 1;
	 ndx = listObj.value.indexOf(boxVal + ',')
	 tmp = listObj.value.substring(0,ndx) + listObj.value.substring(ndx + strLen)
	 listObj.value = tmp;
   }
}
</script>
<form name="swatches">
<input type="checkbox" id="1"  value="1" onClick="addTo(this)">1

a better way to do this -

A better way would be to put in some more effort, and/or farm it out

Vinny

**Mr. Brownstone** · Aug 31, 2003 10:10

Maybe:

HTML Code:

<html>

	<head>
		<title>Swatches</title>
	</head>

	<script type="text/javascript"language="JavaScript"><!--

	var sSwatchList = new Array ( 'swatch1', 'swatch2', 'swatch3', 'swatch4', 'swatch5', 'swatch6' );
	var sTextBoxID = 'swatches';

	function UpdateSwatches ( ) {

		var sSwatchText = new Array ( );
		var oCheckBox;

		for ( var i = 0 ; i < sSwatchList.length ; i ++ ) {

			oCheckBox = document.getElementById ( sSwatchList [ i ] );

			if ( oCheckBox.checked ) {
				sSwatchText.push ( oCheckBox.value );
			}

		}

		document.getElementById ( sTextBoxID ).value = sSwatchText.join ( ',' );

	}

	--></script>

	<body>

		<form>

			<input id="swatch1" type="checkbox" name="swatch" value="1" onclick="UpdateSwatches ( );" /><label for="swatch1">1</label>
			<input id="swatch2" type="checkbox" name="swatch" value="2" onclick="UpdateSwatches ( );" /><label for="swatch2">2</label>
			<input id="swatch3" type="checkbox" name="swatch" value="3" onclick="UpdateSwatches ( );" /><label for="swatch3">3</label>
			<input id="swatch4" type="checkbox" name="swatch" value="4" onclick="UpdateSwatches ( );" /><label for="swatch4">4</label>
			<input id="swatch5" type="checkbox" name="swatch" value="5" onclick="UpdateSwatches ( );" /><label for="swatch5">5</label>
			<input id="swatch6" type="checkbox" name="swatch" value="6" onclick="UpdateSwatches ( );" /><label for="swatch6">6</label>

			<p>
				<input id="swatches" type="text" name="swatches" />
			</p>

		</form>

	</body>

</html>

User Tag List

Thread: Help please! Checkboxes etc.

Thread Tools

Display

Help please! Checkboxes etc.

Bookmarks

Bookmarks

Posting Permissions