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.
increase and decrease table rows as the user select any
Moderator: General Moderators
Re: increase and decrease table rows as the user select any
I'm not sure about the optgroups but you can do it for each option like this:
<script type="text/javascript">
function valid(value) {
if(value=="1"||value=="2"||value=="3"||value=="4"||value=="5"||value=="6"||value=="7") {
document.getElementById('userdetails').style.display='block';
document.getElementById('userdetails').style.visibility='visible';
} else {
document.getElementById('userdetails').style.display='none';
document.getElementById('userdetails').style.visibility='hidden';
}
}
</script>
<select name="pro_type" id="pro_type" onChange="valid(this.options[this.selectedIndex].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>
<script type="text/javascript">
function valid(value) {
if(value=="1"||value=="2"||value=="3"||value=="4"||value=="5"||value=="6"||value=="7") {
document.getElementById('userdetails').style.display='block';
document.getElementById('userdetails').style.visibility='visible';
} else {
document.getElementById('userdetails').style.display='none';
document.getElementById('userdetails').style.visibility='hidden';
}
}
</script>
<select name="pro_type" id="pro_type" onChange="valid(this.options[this.selectedIndex].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>
Re: increase and decrease table rows as the user select any
Thank you for the replay..
But only one activity is working properly.When i wants to select other than 7 the first portion is hiding .. But i want to hide the whole div at the page load..
any suggestion for that... anyone know about working with <tbody> with if case in these kind of selection.
Thanks in advance.
But only one activity is working properly.When i wants to select other than 7 the first portion is hiding .. But i want to hide the whole div at the page load..
any suggestion for that... anyone know about working with <tbody> with if case in these kind of selection.
Thanks in advance.
Re: increase and decrease table rows as the user select any
with javascript
function hideOnLoad() {
document.getElementById('yourDivID1').style.display='none';
document.getElementById('yourDivID1').style.visibility='hidden';
}
<body onload="hideOnLoad()">
or in your CSS
#yourDivID {
visibility:hidden;
display:none;
}
function hideOnLoad() {
document.getElementById('yourDivID1').style.display='none';
document.getElementById('yourDivID1').style.visibility='hidden';
}
<body onload="hideOnLoad()">
or in your CSS
#yourDivID {
visibility:hidden;
display:none;
}