Forum Moderators: open
What should I do to get the inline element both when the page is loaded and radio button clicked.
Thank you
<html>
<head>
<title>Untitled form Folly</title>
<style>
fieldset{display: none; padding: 10px;}
</style>
<script type="text/javascript">
function toggleSet(rad)
{
var type = rad.value;
for(var k=0,elm;elm=rad.form.elements[k];k++)
if(elm.className=='item')
elm.style.display = elm.id==type? 'inline':'';
}
</script>
</head>
<body>
<form>
Vehicle
<input type="radio" name="itemtype" value="vehicle" onclick="toggleSet(this)">
<br>
Equipment
<input type="radio" name="itemtype" value="equipment" onclick="toggleSet(this)">
<br>
<fieldset id="vehicle" class="item">
<legend>Vehicle</legend>
license plate <input type="text" name="licence_plate"><br>
VIN <input type="text" name="VIN"><br>
mileage <input type="text" name="mileage">
</fieldset>
<fieldset id="equipment" class="item">
<legend>Equipment</legend>
model no. <input type="text" name="model_no"><br>
serial no. <input type="text" name="serial_no"><br>
hours <input type="text" name="hours">
</fieldset>
</form> </body>
</html>
The script your wrote only show the subform after the user tick a radio button. What about if vehicle for example is choose as default value (checked), would it be possible to have the form after page is loaded?
This is the script I use in my website.
Pls, try it. As you see, there is a default value and appropriate subform.
I want this but with your script (much cleaner). I tried but failed - I am not a javascript master!
Strangely, the code below doesn't work in FF when I leave the fieldset and legend tags? THis is the reason why they have been removed
<html>
<head>
<title>Untitled form Folly</title>
<script type="text/javascript">
<!--
function writediv(texte) {document.getElementById('subform').innerHTML = texte;}function radiobut1() {
if (document.form1.itemtype[0].checked) {writediv('Vehicle<br>license plate <input type="text" name="licence_plate"><br>VIN<input type="text" name="VIN"><br>Mileage<input type="text" name="mileage">');} else {writediv('Equipment<br>model no.<input type="text" name="model_no"><br>serial no. <input type="text" name="serial_no"><br>hours <input type="text" name="hours">');} }
// -->
</script>
</head>
<body>
<form name="form1">
Vehicle
<input type="radio" name="itemtype" value="vehicle" checked onclick="radiobut1(this)">
<br>
Equipment
<input type="radio" name="itemtype" value="equipment" onclick="radiobut1(this)">
<br> <br><br>
<div id="subform">
Vehicle<br>
license plate <input type="text" name="licence_plate"><br>
VIN <input type="text" name="VIN"><br>
mileage <input type="text" name="mileage">
</fieldset>
</div>
</form>
</body>
</html>
1) Add this CSS rule:
#vehicle{display:inline;}
2) Add this attribute to the 'vehicle' radio button:
checked="checked"
3) Make this slight amendment to a line in the function:
elm.style.display = elm.id==type? 'inline':'[blue]none[/blue]';
..and that's it.
