homepage Welcome to WebmasterWorld Guest from 54.204.141.129
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Select Box that serves also as a LABEL
Gian04




msg:4044855
 4:15 pm on Dec 17, 2009 (gmt 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.

 

rocknbil




msg:4044992
 7:32 pm on Dec 17, 2009 (gmt 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>


Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved