Welcome to WebmasterWorld Guest from 54.196.244.206

Forum Moderators: incrediBILL

Message Too Old, No Replies

Select Box that serves also as a LABEL

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

Preferred Member

10+ Year Member

joined:Nov 25, 2005
posts:392
votes: 0


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.

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

Senior Member

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

joined:Nov 28, 2004
posts:7999
votes: 0


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>

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members