473,320 Members | 1,699 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

changing/adding form fields with a dropdown onChange

tolkienarda
316 100+
hi all
I am working on a php driven database program for a literacy program, it will allow them to keep track of classes and students, the part i am strugling with is adding new classes, the add_class page looks like:
Expand|Select|Wrap|Line Numbers
  1. <body>
  2. ADD CLASS<br>
  3. Class Title: <input type="text" value="class_title"><br>
  4. Class Name: <input type="text" value="class_name">(Must be Unique)<br>
  5. <input type="checkbox" name="children" value="children">Children's Program<br>
  6. <input type="checkbox" name="adult" value="adult">Adult's Program<br>
  7. <input type="checkbox" name="family" value="family">Family Lit.<br>
  8. <br>
  9. INPUTS<br>
  10. <select name="input1_type">
  11.     <option value="text">Text</option>
  12.     <option value="checkbox">Checkbox</option>
  13.     <option value="date">Date</option>
  14.     <option value="select">Drop Down</option>
  15.     <option value="title">Title</option>
  16.     <option value="end">End</option>
  17. </select>&nbsp;&nbsp;
  18. Title:<input type="text" name="input1_title">&nbsp;&nbsp;
  19. Name:<input type="text" name="input1_name">&nbsp;&nbsp;
  20. <br>
  21. <select name="input1_type">
  22.     <option value="text">Text</option>
  23.     <option value="checkbox">Checkbox</option>
  24.     <option value="date">Date</option>
  25.     <option value="select">Drop Down</option>
  26.     <option value="title">Title</option>
  27.     <option value="end">End</option>
  28. </select>&nbsp;&nbsp;
  29. Title:<input type="text" name="input1_title">&nbsp;&nbsp;
  30. Name:<input type="text" name="input1_name">&nbsp;&nbsp;
  31. <br>
  32. <select name="input1_type">
  33.     <option value="text">Text</option>
  34.     <option value="checkbox">Checkbox</option>
  35.     <option value="date">Date</option>
  36.     <option value="select">Drop Down</option>
  37.     <option value="title">Title</option>
  38.     <option value="end">End</option>
  39. </select>&nbsp;&nbsp;
  40. Title:<input type="text" name="input1_title">&nbsp;&nbsp;
  41. Name:<input type="text" name="input1_name">&nbsp;&nbsp;
  42. <br>
  43. </body>
  44.  
what i am trying to do is make it possible for them to create their own form, and when Drop Down is selected i would like for several text boxes to appear so they can input the choices their select box will have.

I have not done much javascript except for modify existing programs and what i have tried to do from scratch has turned into a disaster but i know it is one of the most valuable languages in the web world so i would like to learn more, if someone could point me in the direction of some functions or articles covering similar topics i would appreciate it

thanks

eric
Aug 7 '07 #1
4 3922
pbmods
5,821 Expert 4TB
Heya, Eric.

Thanks for using CODE tags! Did you know that you can specify a language for your CODE tags to make your source code easier to read?

You will still need to use [/code] to close your code blocks, regardless of the language, but you can the use one of these tags to open your code block:

[code=html]
[code=javascript]
[code=php]

and so on.

Thanks!

MODERATOR
Aug 7 '07 #2
pbmods
5,821 Expert 4TB
The way I would approach the situation would be to create a template node and then clone it when I needed to create a new set of elements:

Expand|Select|Wrap|Line Numbers
  1. <form id="insertHere" ... >
  2. </form>
  3.  
  4. <div id="dolly" style="display:none;">
  5. Title:<input type="text" name="input1_title">&nbsp;&nbsp;
  6. Name:<input type="text" name="input1_name">&nbsp;&nbsp;
  7. <br>
  8. <select name="input1_type">
  9.     <option value="text">Text</option>
  10.     <option value="checkbox">Checkbox</option>
  11.     <option value="date">Date</option>
  12.     <option value="select">Drop Down</option>
  13.     <option value="title">Title</option>
  14.     <option value="end">End</option>
  15. </select>&nbsp;&nbsp;
  16. </div>
  17.  
Expand|Select|Wrap|Line Numbers
  1. function addItem()
  2. {
  3.     var $newElement = document.getElementById('dolly').cloneNode(true);
  4.     $newElement.id = '';
  5.     $newElement.style.display = '';
  6.  
  7.     document.getElementById('insertHere').appendChild($newElement);
  8. }
  9.  
Aug 7 '07 #3
tolkienarda
316 100+
hi and thanks for the response,
i am not sure if i don't understand you or if my question was worded imporperly which is very likley because i was only half way though my thought when i posted,
but what i was hoping to achive is when someone selects "Drop Down" from one of my select boxes i would like several text boxes to appear under the drop down so it would look somthing like this:

Expand|Select|Wrap|Line Numbers
  1.  
  2. <select name="input2_type">    
  3.     <option value="end" selected="selected">Type</option>
  4.     <option value="text">Text</option>
  5.     <option value="checkbox">Checkbox</option>
  6.     <option value="date">Date</option>
  7.     <option value="select">Drop Down</option>
  8.     <option value="title">Title</option>
  9.     <option value="end">End</option>
  10. </select>&nbsp;&nbsp;
  11. Title:<input type="text" name="input2_title">&nbsp;&nbsp;
  12. Name:<input type="text" name="input2_name">&nbsp;&nbsp;(Must be Unique within this class, only numbers letters and underscores)<br>
  13. !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  14. Option 1 Name: <input type="text" name="input2_opt1_name"> Title: <input type="text" name="input2_opt1_name"><br>
  15. Option 2 Name: <input type="text" name="input2_opt2_name"> Title: <input type="text" name="input2_opt2_name"><br>
  16. Option 3 Name: <input type="text" name="input2_opt3_name"> Title: <input type="text" name="input2_opt3_name"><br>
  17. Option 4 Name: <input type="text" name="input2_opt4_name"> Title: <input type="text" name="input2_opt4_name"><br>
  18. !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  19.  
the text boxes between the explanation marks would only appear when someone selects the "Drop Down" option from the above select box, and that would obviously push the stuff that was below it down, so i was thinking that there would be an onChange attribute in the <select> tag calling a javascript that checked to see if the new value is "Drop Down" and if it is then it will make the text boxes that are between the explanation marks appear, but they wouldn't exist untill the Drop Down option was selected.

I am not sure if that made it easier to understand or if my attempt at an explination made things more confusing, or if you understood me from the get go and i didn't get your last post, which is also possible cause i am terriable at .js, but regardless thanks for the posts

eric
Aug 7 '07 #4
pbmods
5,821 Expert 4TB
Heya, Eric.

Ah. Ok. Try this:
Expand|Select|Wrap|Line Numbers
  1. <select name="input2_type" onchange="showOptions(this.options[this.selectedIndex].value);"> 
  2.     <option value="end" selected="selected">Type</option>
  3.     <option value="text">Text</option>
  4.     <option value="checkbox">Checkbox</option>
  5.     <option value="date">Date</option>
  6.     <option value="select">Drop Down</option>
  7.     <option value="title">Title</option>
  8.     <option value="end">End</option>
  9. </select>&nbsp;&nbsp;
  10.  
  11. <div id="dropDown_end" style="display:none;">
  12.  
  13. Option 1 Name: <input type="text" name="input2_opt1_name"> Title: <input type="text" name="input2_opt1_name"><br>
  14. Option 2 Name: <input type="text" name="input2_opt2_name"> Title: <input type="text" name="input2_opt2_name"><br>
  15. Option 3 Name: <input type="text" name="input2_opt3_name"> Title: <input type="text" name="input2_opt3_name"><br>
  16. Option 4 Name: <input type="text" name="input2_opt4_name"> Title: <input type="text" name="input2_opt4_name"><br>
  17.  
  18. </div>
  19.  
Expand|Select|Wrap|Line Numbers
  1. var $currentlyShown = null;
  2. function showOptions($value)
  3. {
  4.     // $currentlyShown could be null.
  5.     if($currentlyShown)
  6.     {
  7.         $currentlyShown.style.display = 'none';
  8.     }
  9.  
  10.     $currentlyShown = document.getElementById('DropDown_' + $value);
  11.  
  12.     // Check for invalid selection or no available options.
  13.     if($currentlyShown)
  14.     {
  15.         $currentlyShown.style.display = '';
  16.     }
  17. }
  18.  
This will hide any currently-selected options and show the appropriate set of options for each select option. The key is to name your divs to match the selection they correspond with. And they have to start off hidden, too.
Aug 7 '07 #5

Sign in to post your reply or Sign up for a free account.

Similar topics

2
by: Quinn | last post by:
HI! Have two from text fields named "odds" and "stake" where I enter numeric values. I want to have a text label named "returns" that is automatically updated whenever any of these changes. ...
5
by: Good Man | last post by:
Hi there I'm adding form fields on the fly with some javascript DOM programming. I basically just clone a hidden <div>, then adjust node properties to make this new <div> have unique values...
2
by: Monty | last post by:
I use a SELECT dropdown as the nav interface for jumping to a chosen page number. When I setup up the SELECT element on the page, I want to show the user the current page number they are on, so, I...
19
by: Alex | last post by:
Hello list This question has probably already been asked, but let me ask again I have a mysql database to which I connect with my php scripts. The database contains articles. Name, Unit_Price...
2
by: darrel | last post by:
I am using a javascript WYSIWYG text editor for our CMS. To grab the proper content we need to add a javacsript call to the form: Form1.Attributes.Add("onSubmit", "myOnSubmitEventHandler();") ...
1
by: AndiSmith | last post by:
Hi guys, I wondered if anyone could help me with this problem, or even shed some light on the direction I need to take to resolve it? I'm using .NET 2.0 (C# flavor) to build a large user-based...
4
by: Greg Scharlemann | last post by:
I'm trying to setup a dyamic dropdown list that displays a number of text fields based on the selected number in the dropdown. The problem I am running into is capturing the data already entered...
1
by: David | last post by:
Hi, I have an asp page with a simple form. The form has a dropdown which is database fed. Once the user selects a value from the dropdown, I need some code to test the value selected and dump...
5
by: Bels | last post by:
I am currently designing a real estate website using Dreamweaver CS3, php, MySQL on a Mac. On it is a 'property search' form that queries the property database. The form consists of 5 dropdown lists....
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.