SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    We like music. weirdbeardmt's Avatar
    Join Date
    May 2001
    Location
    Channel Islands Girth: Footlong
    Posts
    5,882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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?
    I swear to drunk I'm not God.
    Matt's debating is not a crime
    Hint: Don't buy a stupid dwarf Clicky

  2. #2
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Where the World Once Stood
    the blades of grass
    cut me still

  3. #3
    We like music. weirdbeardmt's Avatar
    Join Date
    May 2001
    Location
    Channel Islands Girth: Footlong
    Posts
    5,882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool bananas. How about if they uncheck the checkbox?
    I swear to drunk I'm not God.
    Matt's debating is not a crime
    Hint: Don't buy a stupid dwarf Clicky

  4. #4
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Where the World Once Stood
    the blades of grass
    cut me still

  5. #5
    SitePoint Evangelist Mr. Brownstone's Avatar
    Join Date
    May 2002
    Location
    Relative
    Posts
    452
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Of course, that's just my opinion. I could be wrong.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •