...

View Full Version : Checkboxes



codingcodeddode
11-06-2012, 09:01 PM
Im trying to get the value of the textbox to change depending on which checkbox is clicked. Cant get one to work.





<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>

jmrker
11-06-2012, 09:24 PM
Might be better to simplify...


<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>

xelawho
11-06-2012, 09:30 PM
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



<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>

jmrker
11-06-2012, 11:12 PM
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



...


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

Old Pedant
11-07-2012, 02:25 AM
Pardon me Xelawho, but *UGH*!

You already have a MUCH better way of addressing the checkboxes. Why use the clumsy

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:


<!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>

xelawho
11-07-2012, 03:48 AM
there's a list?

Old Pedant
11-07-2012, 04:09 AM
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?

xelawho
11-07-2012, 04:18 AM
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 :thumbsup:

Old Pedant
11-07-2012, 09:14 PM
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).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum