I need form dependency with dropdown menu !!!!

**acoder** · Mar 28 '07, 09:36 AM

Give an id to each <p> tag or you could put them in spans or divs. Hide all of the them by setting the display style to "none".

Then use

Code:

document.getElementById(id).style.display='block';

to display the ones you want. You do this when the user clicks on an option using the onclick event handler.

**deephill** · Mar 28 '07, 10:13 AM

I tried and tired. i new to this.
dont mind. can u xplain. sory 4 da distrubance.

**metrey** · Mar 28 '07, 10:32 AM

Hi deephill,
In fact, the answer of your question, acoder already answer.
So I just write it for you and sure you will understand:

Code:

<html>
<head>
<script>
function firstLoad(){
	document.getElementById("firstLoad").style.display = "none";
}
function ifYesClick(){
	document.getElementById("firstLoad").style.display = "block";
	document.getElementById("ifYes").style.display = 'block';
	document.getElementById("ifNo").style.display = 'none';
}
function ifNoClick(){
	document.getElementById("firstLoad").style.display = "block";
	document.getElementById("ifYes").style.display = 'none';
	document.getElementById("ifNo").style.display = 'block';
}
</script>
</head>

<body onLoad="firstLoad()">
<p>1. Are you married?</p> 
<p>  <label>  <input type="radio" name="married" value="Yes" onClick="ifYesClick()"/> Yes</label> 
<label>  <input type="radio" name="married" value="No" onClick="ifNoClick()" /> No</label> </p> 
<p>&nbsp;</p> 

<div id="firstLoad">
<div id="ifYes">
<p>If &quot;Yes&quot; please enter below details. </p> 
<p>1.1. How many Children? : <input name="how_many_child" type="text" id="how_many_child" size="5" maxlength="2" /> </p> 
<p>1.2. Name of the Children (Seperate with commas) : <input name="child_name" type="text" id="child_name" size="25" maxlength="250" /> </p> 
<p>1.3. Are you done operation? </p> <p>  <label>  <input type="radio" name="operation" value="Yes" /> Yes</label> 
<label>  <input type="radio" name="operation" value="No" /> No</label> </p> 
</div>
<div id="ifNo">
<p>If &quot;No&quot; please enter below details. </p> 
<p>1.3.1. Why? : <input name="why" type="text" id="why" size="25" maxlength="150" /> </p> 
<p>1.3.1. Any health problems you hve? : <input name="health_pbm" type="text" id="health_pbm" size="25" maxlength="150" /> </p> 
</div>
</div>
</body>
</html>

**deephill** · Mar 28 '07, 01:18 PM

Tqu Metrey. I will inform u after finish this.

**deephill** · Mar 29 '07, 08:58 AM

Tqu Metrey & acoder. Its working. But..
in 1 ques If i select "No" i dont need anything.
If i select "Yes", then appear below form.

**acoder** · Mar 29 '07, 09:40 AM

Then get rid of :

Code:

onClick="ifNoClick()"

**deephill** · Mar 29 '07, 10:10 AM

I need form dependency with dropdown menu !!!!

Hi...
I need form dependency with dropdown menu !!!!
Can u check below code.

[HTML]
<html
<head>
<title>Dependen cy Form</title>
</head>

<body>
<form name="form1" method="post" action="">
<p>
<select name="selectpro duct" id="selectprodu ct">
<option>Selec t Product</option>
<option value="Product 1">Product 1</option>
<option value="Product 2">Product 2</option>
<option value="Product 3">Product 3</option>
<option value="Product 4">Product 4</option>
<option value="Product 5">Product 5</option>
</select>
</p>
<p> </p>
<p>Product Name :<br>
<input name="productna me" type="text" id="productname " size="25" maxlength="25">
</p>
<p>Name :<br>
<input name="name" type="text" id="name" size="25" maxlength="25">
</p>
<p>City :<br>
<input name="city" type="text" id="city" size="25" maxlength="25">
</p>
<p>Email:
<br>
<input name="email" type="text" id="email" size="25" maxlength="25">
</p>
<p>Feedback:

<br>
<textarea name="feedback" cols="30" rows="5" id="feedback"> </textarea>
</p>
<p>Are you existing customer?</p>
<p>
<label>
<input type="radio" name="existcust omer" value="Yes">
Yes</label>
<label>
<input type="radio" name="existcust omer" value="No">
No</label>
</p>
<p>Company Name :
<br>
<input name="companyNa me" type="text" id="companyName " size="25" maxlength="25">
</p>
<p>Customer ID :
<br>
<input name="customeri d" type="text" id="customerid " size="25" maxlength="25">
</p>
<p>
<input name="accept" type="checkbox" id="accept" value="checkbox ">
I accept all <a href="#">Terms and Conditions</a>.</p>
<p>
<input name="submit" type="submit" id="submit" value="Submit">
<input name="reset" type="reset" id="reset" value="Reset">
<br>
</p>
</form>
<p> </p>
</body>
</html>

[/HTML]

I need...

1. When user go this page appear only Select Product Dropdown menu.

2. If user select any product then form appear with that Product Name default.
Ex: If user select Product 2, then form automatically appear with Product 2 in "Product Name Textbox". If user change to Product 1 then automatically appear with Product 1 in "Product Name Textbox".

3. Afterthat user click YES for "Are you existing customer?" then appear Company Name and Customer ID.

4. If user click agian NO for "Are you existing customer?" dont appear Company Name and Customer ID (Means Auto hide).

5. Next user select "accept all Terms and Conditions." then highlight submit button.

These are vry hard to me. Plz try 2 help.

Is thr any preview option available. (Preview is Optional. Not required.)

**deephill** · Mar 29 '07, 10:33 AM

Hey Acoder its working. tqu
But When i click YES form appered, again i click No Form is not hide. ???

**acoder** · Mar 30 '07, 07:41 AM

Originally posted by deephill

Hey Acoder its working. tqu
But When i click YES form appered, again i click No Form is not hide. ???

In that case, put the onclick back and in the function that is called, remove the line which displays, i.e. keep the line which hides.

**deephill** · Mar 30 '07, 08:48 AM

Acoder its not working. i mean whr did i put????

**acoder** · Mar 30 '07, 10:55 AM

Change your function to:

Code:

function ifNoClick(){
	document.getElementById("firstLoad").style.display = "block";
	document.getElementById("ifYes").style.display = 'none';
}

**deephill** · Mar 30 '07, 11:35 AM

Tqu Acoder. its working. this is useful for lot of beginers.
All da best beginers :-)

I need form dependency with dropdown menu !!!!

I need form dependency with dropdown menu !!!!

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment