JavaScript Development
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
 
User Name:
Password:
Remember me
 
Go Back   Dev Articles Community Forums > Programming > JavaScript Development
Reload this Page

HELP: populate textarea depending on drop down selection

Discuss HELP: populate textarea depending on drop down selection in the JavaScript Development forum on Dev Articles.
HELP: populate textarea depending on drop down selection JavaScript Development forum discussing the use of JavaScript and its features as a powerful DOM manipulator. JavaScript is used in most websites to enrich the interface and enhance the user experience.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Display Modes
 
Unread Dev Articles Community Forums Sponsor:
Stay one step ahead of the competition. Evaluate and give feedback on some of the hottest web development tools on the market today. Make your opinion heard! Click Here
  #1  
Old April 20th, 2006, 05:11 PM
m00nbeast m00nbeast is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: Dec 2004
Posts: 9 m00nbeast User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 24 m 35 sec
Reputation Power: 0
Thumbs up [RESOLVED] HELP: populate textarea depending on drop down selection
Hello and thanks for taking the time to review my request for help

I am creating a timesheet entry program and am having trouble with one part of it since I am not very good with javascript.

I have a dropdown box containing certain types of entries that are available and want to make it so that when certain choices in the dropdown are selected, certain things happen like the description box is populated with certain text, and when travel time is picked I want it to make a couple divs visible.

My non-working javascript:

Code:

<script type="text/javascript">

function type_select() {

val = document.Form.type_id.options[document.Form.type_id.selectedIndex].value; 
textbox = document.Form.description; 
	
if (val = '0')
	{

	textbox.value = "0- Nothing selected";
	document.getElementById('div1').style.display = "block";
	document.getElementById('div2').style.display = "block";

	}
		
if (val = '1')
	{

	textbox.value = "1- Ticket #:";
	document.getElementById('div1').style.display = "none";
	document.getElementById('div2').style.display = "none";

	}
	
if (val = '2' )
	{
	
	textbox.value = "2- From: To:";
	document.getElementById('div1').style.display = "block";
	document.getElementById('div2').style.display = "block";

	}

if (val = '3' )
	{
	
	textbox.value = "3- ";
	document.getElementById('div1').style.display = "none";
	document.getElementById('div2').style.display = "none";

	}
	
if (val = '4' )
	{
	
	textbox.value = "4- ";
	document.getElementById('div1').style.display = "none";
	document.getElementById('div2').style.display = "none";

	}
		
if (val = '5' )
	{
	
	textbox.value = "5- Holiday:";
	document.getElementById('div1').style.display = "none";
	document.getElementById('div2').style.display = "none";

	}
		
if (val = '6' )
	{
	
	textbox.value = "6- Illness:";
	document.getElementById('div1').style.display = "none";
	document.getElementById('div2').style.display = "none";

	}
	
if (val = '7' )
	{
	
	textbox.value = "7- ";
	document.getElementById('div1').style.display = "none";
	document.getElementById('div2').style.display = "none";

	}
	
if (val = '8' )
	{
	
	textbox.value = "8- ";
	document.getElementById('div1').style.display = "none";
	document.getElementById('div2').style.display = "none";

	}
}
</script>


This is the HTML for the dropdown, and textarea

Code:
<td align=center>
			
		
			
<SELECT NAME="type_id" class="menumain" OnChange="type_select();">
	<option value="0">Choose One</option>
				
 	<OPTION VALUE="1" >ticket</option>
		
 	<OPTION VALUE="2" >travel</option>
		
 	<OPTION VALUE="3" >personal</option>
		
 	<OPTION VALUE="4" >planning</option>
		
 	<OPTION VALUE="5" >holiday</option>
		
 	<OPTION VALUE="6" >vacation</option>
		
 	<OPTION VALUE="7" >sick</option>
		
 	<OPTION VALUE="8" >training</option>
		 
</select>
</td>
<td align=center>
<TEXTAREA class="menumain" cols=20 name="description" rows=4 wrap=virtual title="Enter The Note Description In This Box. Please Be As Specific As Possible"></TEXTAREA> 
</td>
<td align=center>
	<div id="div1" style="display:none;">
	<input type=text value="" class=menumain size=20 name="odom_start"  title="Beginning Odometer Value" >
	</div>
</td>
<td align=center>
	<div id="div2" style="display:none;">
	<input type=text value="" class=menumain size=20 name="odom_end"  title="Ending Odometer Value" >
	</div>
</td>


So far what happens is that no matter what I choose in the drop down it will always populate it as if I selected the last choice.

Do I need to make it return once it found the right choice or somethng and if so then how do I do that?
Last edited by m00nbeast : April 20th, 2006 at 05:44 PM. Reason: title change
Reply With Quote
  #2  
Old April 23rd, 2006, 07:38 AM
ravs ravs is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: Apr 2006
Location: gurgaon, haryana, india
Posts: 60 ravs User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 11 h 44 m 29 sec
Reputation Power: 3
Send a message via Yahoo to ravs
Hello buddy if u look at ur code once again you will fint that you have used selectedIndex to find your current index but u havne used options before it.

take this
val = document.Form.type_id.options[document.Form.type_id.selectedIndex].value;
textbox = document.Form.description;
correct one
val = document.Form.type_id.options[document.Form.type_id.options.selectedIndex].value;




Quote:
Originally Posted by m00nbeast
Hello and thanks for taking the time to review my request for help

I am creating a timesheet entry program and am having trouble with one part of it since I am not very good with javascript.

I have a dropdown box containing certain types of entries that are available and want to make it so that when certain choices in the dropdown are selected, certain things happen like the description box is populated with certain text, and when travel time is picked I want it to make a couple divs visible.

My non-working javascript:

Code:

<script type="text/javascript">

function type_select() {

val = document.Form.type_id.options[document.Form.type_id.selectedIndex].value; 
textbox = document.Form.description; 
	
if (val = '0')
	{

	textbox.value = "0- Nothing selected";
	document.getElementById('div1').style.display = "block";
	document.getElementById('div2').style.display = "block";

	}
		
if (val = '1')
	{

	textbox.value = "1- Ticket #:";
	document.getElementById('div1').style.display = "none";
	document.getElementById('div2').style.display = "none";

	}
	
if (val = '2' )
	{
	
	textbox.value = "2- From: To:";
	document.getElementById('div1').style.display = "block";
	document.getElementById('div2').style.display = "block";

	}

if (val = '3' )
	{
	
	textbox.value = "3- ";
	document.getElementById('div1').style.display = "none";
	document.getElementById('div2').style.display = "none";

	}
	
if (val = '4' )
	{
	
	textbox.value = "4- ";
	document.getElementById('div1').style.display = "none";
	document.getElementById('div2').style.display = "none";

	}
		
if (val = '5' )
	{
	
	textbox.value = "5- Holiday:";
	document.getElementById('div1').style.display = "none";
	document.getElementById('div2').style.display = "none";

	}
		
if (val = '6' )
	{
	
	textbox.value = "6- Illness:";
	document.getElementById('div1').style.display = "none";
	document.getElementById('div2').style.display = "none";

	}
	
if (val = '7' )
	{
	
	textbox.value = "7- ";
	document.getElementById('div1').style.display = "none";
	document.getElementById('div2').style.display = "none";

	}
	
if (val = '8' )
	{
	
	textbox.value = "8- ";
	document.getElementById('div1').style.display = "none";
	document.getElementById('div2').style.display = "none";

	}
}
</script>


This is the HTML for the dropdown, and textarea

Code:
<td align=center>
			
		
			
<SELECT NAME="type_id" class="menumain" OnChange="type_select();">
	<option value="0">Choose One</option>
				
 	<OPTION VALUE="1" >ticket</option>
		
 	<OPTION VALUE="2" >travel</option>
		
 	<OPTION VALUE="3" >personal</option>
		
 	<OPTION VALUE="4" >planning</option>
		
 	<OPTION VALUE="5" >holiday</option>
		
 	<OPTION VALUE="6" >vacation</option>
		
 	<OPTION VALUE="7" >sick</option>
		
 	<OPTION VALUE="8" >training</option>
		 
</select>
</td>
<td align=center>
<TEXTAREA class="menumain" cols=20 name="description" rows=4 wrap=virtual title="Enter The Note Description In This Box. Please Be As Specific As Possible"></TEXTAREA> 
</td>
<td align=center>
	<div id="div1" style="display:none;">
	<input type=text value="" class=menumain size=20 name="odom_start"  title="Beginning Odometer Value" >
	</div>
</td>
<td align=center>
	<div id="div2" style="display:none;">
	<input type=text value="" class=menumain size=20 name="odom_end"  title="Ending Odometer Value" >
	</div>
</td>


So far what happens is that no matter what I choose in the drop down it will always populate it as if I selected the last choice.

Do I need to make it return once it found the right choice or somethng and if so then how do I do that?
Reply With Quote
Reply

Viewing: Dev Articles Community Forums > Programming > JavaScript Development > HELP: populate textarea depending on drop down selection

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 4 hosted by Hostway.