...

View Full Version : Auto checking tickbox...



many_tentacles
04-27-2006, 01:16 PM
Hi

I want to make a checkbox automatically tick itself when someone chooses an item from a pulldown menu...

Is this possible???

Here's the lame code i have so far.

Thanks


<input name="Hamper" type="checkbox" value="Add Hamper">
<select name="select type">
<option selected>Hamper Types
<option>
<option value="#">2 Person Hamper
<option value="#">2 Person Luxury Hamper
<option value="#">4 Person Hamper
<option value="#">4 Person Luxury Hamper
<option value="#">6 Person Hamper
<option value="#">6 Person Luxury Hamper
<option value="#">8 Person Hamper
<option value="#">8 Person Luxury Hamper
</select>

Bill Posters
04-27-2006, 01:48 PM
e.g.

<script type="text/javascript">

function setAddHamper() {

var hhEl = document.getElementById('addhamper');
var whichHamperEl = document.getElementById('hampertype');
hhEl.checked = (whichHamperEl.value != '0');

}

</script>

<form action="/" method="post">
<fieldset>

<label>
<input type="checkbox" value="Add Hamper" name="addhamper" id="addhamper">
Add hamper
</label>

<label>Hamper type
<select name="hampertype" id="hampertype" onchange="setAddHamper();">
<option value="0">No Hamper</option>
<option value="1">2 Person Hamper</option>
<option value="2">2 Person Luxury Hamper</option>
<option value="3">4 Person Hamper</option>
<option value="4">4 Person Luxury Hamper</option>
<option value="5">6 Person Hamper</option>
<option value="6">6 Person Luxury Hamper</option>
<option value="7">8 Person Hamper</option>
<option value="8">8 Person Luxury Hamper</option>
</select>
</label>

</fieldset>
</form>

The checkbox would ideally be given a readonly attribute to prevent users from checking it without actually selecting a hamper type. However, the readonly attribute isn't reliable/available for checkboxes, so there's very little to prevent users from misusing the form.

It's worth noting that using onchange with select menus has some major accessibility issues for keyboard users/navigators, so it maybe preferable to check the checkbox as part of a submit/validation process.
Personally, I'm not sure I see any reason to have a checkbox given that you can get that info directly from the select menu.

many_tentacles
04-27-2006, 02:16 PM
thanks bill

i see your point about usability, to be honest it's as much a learning exercise as anything...

If I was to have more than one pulldown menu, how would that work... obviously would need to adapt the javascript.


<form action="/" method="post">
<fieldset>

<label>
<input type="checkbox" value="Add Hamper" name="addhamper" id="addhamper">
Add Hamper
</label>

<label>
<select name="hampertype" id="hampertype" onchange="setAddHamper();">
<option value="0">No Hamper</option>
<option value="1">2 Person Hamper</option>
<option value="2">2 Person Luxury Hamper</option>
<option value="3">4 Person Hamper</option>
<option value="4">4 Person Luxury Hamper</option>
<option value="5">6 Person Hamper</option>
<option value="6">6 Person Luxury Hamper</option>
<option value="7">8 Person Hamper</option>
<option value="8">8 Person Luxury Hamper</option>
</select>
</label>

<br>

<label>
<input type="checkbox" value="Add Umbrella" name="addUmbrella" id="addUmbrella">
Add Umbrella
</label>

<label>
<select name="Umbrellatype" id="umbrellatype" onchange="setAddUmbrella();">
<option value="0">No Umbrella</option>
<option value="1">1 Umbrella</option>
<option value="2">2 Umbrellas</option>
<option value="3">3 Umbrellas</option>
<option value="4">4 Umbrellas</option>
</select>
</label>

</fieldset>
</form>

Bill Posters
04-27-2006, 03:18 PM
The function can be made more reusable by passing certain values as variables in the function call. (There are other ways to address the relevant elements, but this is the most straight-forward.)


function setAddItem(checkboxId,selectId) {

var checkboxEl = document.getElementById(checkboxId);
var selectEl = document.getElementById(selectId);
checkboxEl.checked = (selectEl.value != '0');

}

<form action="/" method="post">
<fieldset>

<label>
<input type="checkbox" value="Add Hamper" name="addhamper" id="addhamper">
Add Hamper
</label>

<label>
<select name="hampertype" id="hampertype" onchange="setAddItem('addhamper',this.id);">
<option value="0">No Hamper</option>
<option value="1">2 Person Hamper</option>
<option value="2">2 Person Luxury Hamper</option>
<option value="3">4 Person Hamper</option>
<option value="4">4 Person Luxury Hamper</option>
<option value="5">6 Person Hamper</option>
<option value="6">6 Person Luxury Hamper</option>
<option value="7">8 Person Hamper</option>
<option value="8">8 Person Luxury Hamper</option>
</select>
</label>

<br>

<label>
<input type="checkbox" value="Add Umbrella" name="addUmbrella" id="addUmbrella">
Add Umbrella
</label>

<label>
<select name="Umbrellatype" id="umbrellatype" onchange="setAddItem('addUmbrella',this.id);">
<option value="0">No Umbrella</option>
<option value="1">1 Umbrella</option>
<option value="2">2 Umbrellas</option>
<option value="3">3 Umbrellas</option>
<option value="4">4 Umbrellas</option>
</select>
</label>

</fieldset>
</form>

many_tentacles
04-27-2006, 05:03 PM
Thats great stuff

I've actually adapted the Javascript slightly so that the check box is inactive until a menu item is selected... it's just a cosmetic thing really to go alongside the menu.

Thanks


<script type="text/javascript">
function setAddItem(checkboxId,selectId) {
var checkboxEl = document.getElementById(checkboxId);
var selectEl = document.getElementById(selectId);
checkboxEl.checked = (selectEl.value != '0');
checkboxEl.disabled = (selectEl.value <= '0');
}
</script>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum