Welcome to WebmasterWorld Guest from 54.196.144.100

Forum Moderators: incrediBILL

Message Too Old, No Replies

Select Box that serves also as a LABEL

     

Gian04

4:15 pm on Dec 17, 2009 (gmt 0)

5+ Year Member



I have this on my HTML form

<input name="xyz" type="radio" value="frt">
<select name="fruits" size="1" style="width:100px">
<option value="fruit1">Fruit 1</option>
<option value="fruit2">Fruit 2</option>
</select>

<input name="xyz" type="radio" value="veg">
<select name="vegetables" size="1" style="width:100px">
<option value="veg1">Veggie 1</option>
<option value="veg2">Veggie 2</option>
</select>

How can I make it that if the user click on the second select box (Veggies), the second radio button will be automatically selected.

And if the user click on the first select box (Fruits), it will automatically select the first radio button.

rocknbil

7:32 pm on Dec 17, 2009 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



First, a couple "thangs" . . .

It's always a good idea to have the first item in a select blank. First is for usability/user error; if it's a required field the user may submit and not realize they selected what was selected by default. Second is it's easier for what you're trying to do here.

Second is that radio buttons should always have one radio selected by default, this is how they are supposed to work. Having one "not selected" is a common usage and is by no means "illegal" but once selected, a refresh/reload will seldom reset them to "nothing selected" and is just problematic. However, Javascript should be able to unset them OK . . .

Last, don't confuse "label" with what you are doing here, labels are accessibility tools that are "attached" to form objects by their ID's (note the ID's added below, which we also use in my solution.) I've added two labels below to show how they are used.

Here's a JS solution.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- doctype on one line -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<script type="text/javascript">
function setRadio(selectObject) {
fruits = document.getElementById('fruits');
veg = document.getElementById('veggies');
// buttons are an array - so you can access them
// by object-name[0] or object-name[1], or by id.
if (selectObject.selectedIndex > 0) {
if (selectObject.id=='fruits') {
veg.selectedIndex=0;
document.getElementById('xyz-fruit').checked=true;
document.getElementById('xyz-veg').checked=false;
}
else {
fruits.selectedIndex=0;
document.getElementById('xyz-fruit').checked=false;
document.getElementById('xyz-veg').checked=true;
}
}
else {
document.getElementById('xyz-fruit').checked=false;
document.getElementById('xyz-veg').checked=false;
}
}
</script>
</head>
<body>
<form action="" method="post">
<p><label for="xyz-fruit">Fruit:</label> <input name="xyz" id="xyz-fruit" type="radio" value="frt">
<select name="fruits" id="fruits" size="1" style="width:100px" onchange="setRadio(this);">
<option value="">Select</option>
<option value="fruit1">Fruit 1</option>
<option value="fruit2">Fruit 2</option>
</select></p>
<p><label for="xyz-veg">Veggies:</label> <input name="xyz" id="xyz-veg" type="radio" value="veg">
<select name="vegetables" id="veggies" size="1" style="width:100px" onchange="setRadio(this);">
<option value="">Select</option>
<option value="veg1">Veggie 1</option>
<option value="veg2">Veggie 2</option>
</select></p>
</form>
<p>How can I make it that if the user click on the second select box (Veggies),
the second radio button will be automatically selected.</p>
<p>And if the user click on the first select box (Fruits),
it will automatically select the first radio button. </p>
</body>
</html>