increase and decrease table rows as the user select any

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
dt22
Forum Commoner
Posts: 32
Joined: Sat Oct 10, 2009 2:53 am

increase and decrease table rows as the user select any

Post by dt22 »

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.
xjx424
Forum Newbie
Posts: 3
Joined: Thu Jan 20, 2011 11:12 am

Re: increase and decrease table rows as the user select any

Post by xjx424 »

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>
dt22
Forum Commoner
Posts: 32
Joined: Sat Oct 10, 2009 2:53 am

Re: increase and decrease table rows as the user select any

Post by dt22 »

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.
xjx424
Forum Newbie
Posts: 3
Joined: Thu Jan 20, 2011 11:12 am

Re: increase and decrease table rows as the user select any

Post by xjx424 »

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;
}
Post Reply