increase and decrease table rows as the user select any
Posted: Thu Jan 20, 2011 10:10 am
Hi All,
Am very much new to javascript area.. and thats why am facing a headache in my code.
Am creating a form that will increase and decrease its table rows as the user select any option form the drop down box.
<select name="pro_type" id="pro_type" onChange="valid(this.value)">
<optgroup label="Residential">
<option value="1">House/Villa</option>
<option value="2">Flat/Apartment</option></optgroup>
<optgroup label="Commercial">
<option value="3">Commercial Shops</option>
<option value="4">Commercial Showrooms</option>
<option value="5">Commercial Office</option>
<option value="6">Hotel/Resort</option>
<option value="7">Ware House</option></optgroup>
<optgroup label="Land">
<option value="8">Commercial Land</option>
<option value="9">Industrial Lands/Plots</option>
<option value="10">Residential Lands/Plots</option>
<option value="11">Agricultural/Farm Land</option></optgroup>
</select>
This is the code for my drop down box. The rows are same for Residential and Commercial but when the land is selected the options will be changed. unless any option are not made the form need not to display any of these extra rows.That means the all the div ids should be invisible or hide at the time of load.
I tried java for this and i know there is option to give while selecting each option individually. But how can i do that to a group of option value.
function valid(value)
{
if(value=="1"||value=="2"||value=="3"||value=="4"||value=="5"||value=="6"||value=="7")
document.getElementById('userdetails').style.display='block';
else
document.getElementById('userdetails').style.display='none';
}
But this code making everything visible. please help me.
Am very much new to javascript area.. and thats why am facing a headache in my code.
Am creating a form that will increase and decrease its table rows as the user select any option form the drop down box.
<select name="pro_type" id="pro_type" onChange="valid(this.value)">
<optgroup label="Residential">
<option value="1">House/Villa</option>
<option value="2">Flat/Apartment</option></optgroup>
<optgroup label="Commercial">
<option value="3">Commercial Shops</option>
<option value="4">Commercial Showrooms</option>
<option value="5">Commercial Office</option>
<option value="6">Hotel/Resort</option>
<option value="7">Ware House</option></optgroup>
<optgroup label="Land">
<option value="8">Commercial Land</option>
<option value="9">Industrial Lands/Plots</option>
<option value="10">Residential Lands/Plots</option>
<option value="11">Agricultural/Farm Land</option></optgroup>
</select>
This is the code for my drop down box. The rows are same for Residential and Commercial but when the land is selected the options will be changed. unless any option are not made the form need not to display any of these extra rows.That means the all the div ids should be invisible or hide at the time of load.
I tried java for this and i know there is option to give while selecting each option individually. But how can i do that to a group of option value.
function valid(value)
{
if(value=="1"||value=="2"||value=="3"||value=="4"||value=="5"||value=="6"||value=="7")
document.getElementById('userdetails').style.display='block';
else
document.getElementById('userdetails').style.display='none';
}
But this code making everything visible. please help me.