Perl Guru Forums: Other Programming Languages: Javascript: Modifying text boxes dynamically

CGI/Perl Guide | Learning Center | Forums | Advertise | Login

Site Search: in


	MAIN INDEX	SEARCH POSTS	WHO'S ONLINE	LOG IN

Home: Other Programming Languages: Javascript:
Modifying text boxes dynamically

Jean
User

Feb 9, 2005, 10:25 AM

Post #1 of 3 (44077 views)

Modifying text boxes dynamically	Can't Post

Hi All,

Being in dare need of some script, I'm not even sure this can be done with JavaScript as I'm not familiar with it.

What I need is to have some sort of drop-down list that affects some text boxes (<input> fields).

For example, let's assume that we have a drop-down list of 'cars,fruits,digicams'.

Now whenever a user selects

1. 'car', two text boxes - simple "INPUT" HTML tags - should appear: 'maker','max_speed'

2. 'friuts', one text box should with 'price_per_kg'

3. 'digicams', two text boxes - 'maker', 'megapixels'

Please take into account that:

1. I'm not familiar with JavaScript and barely familiar with Web programming in general

2. I'm pretty good at Perl - at least at its use as a system tool and for writing complex non-Web tools

3. After the user fills the text boxes

Thanks in advance for the help,

Jean Spector
SQA Engineer @ Exanet
jean.spector@softhome.net

There are only 10 types of people in the world -
Those who understand binary, and those who don't.

(This post was edited by Jean on Feb 9, 2005, 11:00 AM)

OwChallie
Novice

Feb 12, 2005, 1:41 AM

Post #2 of 3 (44047 views)

Re: [Jean] Modifying text boxes dynamically [In reply to]	Can't Post

Hi, here is a sample of a program that does something similar to what you need:

Code

  
 
<HTML>  
 
<HEAD> 
<SCRIPT> 
function Changer() //Javascript function to change what is shown depending on what is selected in the select box 
{ 
 if (Test.Select.value == "One") //Check the select box - Test is the name of the form and Select is the name of the select box 
 { 
  One.style.display = 'block'; //Show the table called One 
  Two.style.display = 'none'; //Hide the table called Two 
 } 
 else if (Test.Select.value == "Two") 
 { 
  One.style.display = 'none'; 
  Two.style.display = 'block'; 
 } 
} 
</SCRIPT> 
</HEAD>  
 
<BODY> 
<FORM NAME="Test" Method="get" ACTION="Test.pl"> 
<SELECT NAME="Select" ONCHANGE="Changer()"> 
 <OPTION VALUE="One">One</OPTION> 
 <OPTION VALUE="Two">Two</OPTION> 
</SELECT>  
 
<TABLE ID="One"> 
<TR><TD><INPUT NAME="First" TYPE="text"></TD></TR> 
</TABLE>  
 
<TABLE ID="Two" STYLE="display:none"> 
<TR><TD><INPUT NAME="Second" TYPE="text"></TD></TR> 
<TR><TD><INPUT NAME="Action" TYPE="submit" VALUE="Test Me"></TD></TR> 
</TABLE> 
</FORM> 
</BODY>  
 
</HTML>

NOTE:

You should notice that if you choose one and fill in the text box, then choose two, the value in the first text box will not be lost. It will also be passed when you submit the form when two is selected.

I gave the <TABLE> tag an id which, when manipulated, changes everything between the <TABLE> tag and the </TABLE> tag, therefore allowing me to put anything I wanted there.

When dealing with <INPUT> <SELECT> <TEXTAREA> ect, tags, you need to have an attribute called NAME in order to pass the values to your program. When manipulating these values with javascript, they are subsidaries of the <FORM> tag so therefore need to be accessed by using the name of the form to point to it and then the name of the tag you wish to manipulate.

Hope this helps. I am not very good at explaining things, but hopefully you can see what is being done by the program.

Jean
User

Feb 12, 2005, 1:48 AM

Post #3 of 3 (44044 views)

Re: [OwChallie] Modifying text boxes dynamically [In reply to]	Can't Post

Thank you very much OwChallie - that's exactly what I needed :-)

Jean Spector
SQA Engineer @ Exanet
jean.spector@softhome.net

There are only 10 types of people in the world -
Those who understand binary, and those who don't.

Search for (options)

Web Applications & Managed Hosting Powered by Gossamer Threads
Visit our Mailing List Archives