By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,667 Members | 2,603 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,667 IT Pros & Developers. It's quick & easy.

changing/adding form fields with a dropdown onChange

tolkienarda
100+
P: 316
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
Share this Question
Share on Google+
4 Replies


pbmods
Expert 5K+
P: 5,821
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
Expert 5K+
P: 5,821
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
100+
P: 316
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
Expert 5K+
P: 5,821
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

Post your reply

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