Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9

Thread: Checkboxes

  1. #1
    New Coder
    Join Date
    Oct 2012
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Checkboxes

    Im trying to get the value of the textbox to change depending on which checkbox is clicked. Cant get one to work.


    Code:
    <html>
    <head>
    
    	<script>
    	
    		var boxVal = document.getElementById('box').value;
    	
    		while(chocolate.checked){
    		var myValue = ' Chocolate';
    		document.getElementById('box').value = boxVal + myValue;
    		}
    	
    	</script>
    
    </head>
    
    <body>
    
    <form name='myForm'>
    
    <input type='checkbox' id='chocolate' name='cb'> Chocolate <br>
    <input type='checkbox' id= 'vanilla' name='cb'> Vanilla <br>
    <input type='checkbox' id='rockyRoad' name='cb'> Rocky Road <br>
    <input type='checkbox' id='cookiesNcream' name='cb'> Cookies N Cream <br>
    <input type='checkbox' id='Rainbow' name='cb'> RainBox <br>
    <input width='100' value='You Picked ' id='box' onfocus='alert("Hey get out"); break;'>
    </form>
    </body>
    </html>

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,027
    Thanks
    36
    Thanked 494 Times in 488 Posts
    Might be better to simplify...
    Code:
    <html>
    <head>
    <script>
    function showFlavor(info) {
      var str = '';
      var sel = document.getElementById('Flavors').getElementsByTagName('input');
      for (var i=0; i<sel.length; i++) {
        if (sel[i].checked) { str += sel[i].id+' '; }
      }
      document.getElementById('box').value = str;
    }
    </script>
    </head>
    <body>
    <form name='myForm'>
    
    <span id="Flavors">
    <input type='checkbox' id='chocolate' onclick="showFlavor(this.id)"> Chocolate <br>
    <input type='checkbox' id='vanilla' onclick="showFlavor(this.id)"> Vanilla <br>
    <input type='checkbox' id='rockyRoad' onclick="showFlavor(this.id)"> Rocky Road <br>
    <input type='checkbox' id='cookiesNcream' onclick="showFlavor(this.id)"> Cookies N Cream <br>
    <input type='checkbox' id='Rainbow' onclick="showFlavor(this.id)"> RainBow <br>
    </span>
    <br><input size='50' value='You Picked ' id='box' onfocus='alert("Hey get out")'>
    
    </form>
    </body>
    </html>

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,774
    Thanks
    55
    Thanked 518 Times in 515 Posts
    it would make more sense to use radio buttons, unless you want to allow multiple selections, but anyway... Also, please don't do that with the onfocus of the text input - you can make it read only, which is much more user friendly

    Code:
    <html>
    <head>
    </head>
    <body>
    <form name='myForm'>
    <div id="inps">
    <input type='checkbox' value='Chocolate' name='cb'> Chocolate <br>
    <input type='checkbox' value= 'Vanilla' name='cb'> Vanilla <br>
    <input type='checkbox' value='Rocky Road' name='cb'> Rocky Road <br>
    <input type='checkbox' value='Cookies N Cream' name='cb'> Cookies N Cream <br>
    <input type='checkbox' value='Rainbow' name='cb'> RainBox <br>
    </div>
    <input width='100' id='box' readonly="readonly">
    </form>
    	<script>
    var cbs=document.getElementById("inps").getElementsByTagName("input")	
    for (j = 0; j < cbs.length; j++) {
    cbs[j].onclick=function(){
    document.getElementById('box').value=this.checked?"You Picked "+this.value:"";
    	}
    }	
    	
    	</script>
    </body>
    </html>

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,027
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Exclamation

    Quote Originally Posted by xelawho View Post
    it would make more sense to use radio buttons, unless you want to allow multiple selections, but anyway... Also, please don't do that with the onfocus of the text input - you can make it read only, which is much more user friendly

    Code:
    ...
    Very true, but I was trying to duplicate OP's code as much a possible.
    Difficult to please two masters.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Pardon me Xelawho, but *UGH*!

    You already have a MUCH better way of addressing the checkboxes. Why use the clumsy
    Code:
    var cbs=document.getElementById("inps").getElementsByTagName("input")
    On top of that, your code doesn't allow the user to UN-check a flavor to remove it from the list!

    Why not this:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    <form id="myForm"><!-- named forms are obsolete! use an id! -->
    <input type="checkbox" value="Chocolate" name="cb"> Chocolate <br/>
    <input type="checkbox" value= "Vanilla" name="cb"> Vanilla <br/>
    <input type="checkbox" value="Rocky Road" name="cb"> Rocky Road <br/>
    <input type="checkbox" value="Cookies N Cream" name="cb"> Cookies N Cream <br/>
    <input type="checkbox" value="Rainbow" name="cb"> RainBow <br/>
    <hr/>
    <input style="width: 300px;" name="box" readonly="readonly"><!-- named! no id! -->
    </form>
    
    <script type="text/javascript">
    (
      function() 
      {
          var form = document.getElementById("myForm");
    
          var cbs = form.cb; // see? this in place of getElementsByName!!!
          for ( var c = 0; c < cbs.length; ++c )
          {
              cbs[c].onclick = rebuild;
          }
       
          function rebuild( )
          {
              var allChecked = [ ];
              var cbs = form.cb;
              for ( var c = 0; c < cbs.length; ++c )
              {
                  if ( cbs[c].checked ) { allChecked.push( cbs[c].value ); }
              }
              form.box.value = allChecked.join(", ");
          }
      }
    
    )();
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,774
    Thanks
    55
    Thanked 518 Times in 515 Posts
    there's a list?

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Quote Originally Posted by xelawho View Post
    there's a list?
    Well, yes, I guess so. A collection, at least.

    The checkboxes are all named "cb" so using form.cb gives you that collection.

    You don't need to invent that enclosing <div> as you did. (Which might not even work in some page layouts.)

    I encourage using the form elements above all when possible. Same reason I dislike seeing id's added to form elements just so they can be referred to using document.getElementById. Ugh. Why?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,774
    Thanks
    55
    Thanked 518 Times in 515 Posts
    Quote Originally Posted by Old Pedant View Post
    Why?
    Dunno. Just lazy, I guess. I'm wondering about the list because there's nothing in the original post that says anything about having two choices available, which is why I wondered why they weren't using radios. But it's a good point about the names and form elements

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Well, crud! You are right. The original post only allowed one choice.

    But then all you need to do is change type="checkbox" to type="radio" and then your code works fine. It just doesn't work with checkboxes, as given, because it doesn't un-check the prior choice(s).
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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