Help please! Checkboxes etc.

Printable View

Aug 31, 2003, 09:00
weirdbeardmt

Help please! Checkboxes etc.

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? :D
Aug 31, 2003, 09:06
Vincent Puglia

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
Aug 31, 2003, 09:13
weirdbeardmt

Cool bananas. How about if they uncheck the checkbox?
Aug 31, 2003, 09:58
Vincent Puglia

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

Quote:

a better way to do this -

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

Vinny
Aug 31, 2003, 10:10
Mr. Brownstone

Maybe:

HTML Code:

<html> <head> <title>Swatches</title> </head> <script type="text/javascript"language="JavaScript"></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>