SitePoint Sponsor |
|
User Tag List
Results 1 to 11 of 11
-
May 21, 2002, 09:59 #1
- Join Date
- Sep 2000
- Location
- Chicago
- Posts
- 526
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Automagically generate form fields
Hi,
I am looking for a method to automatically generate form fields.
Initially on the form there will be 2 select fields right next to each other. These fields are not multiple fields and multiple fields will not work with this scenario because both fields correspond to each other.
Now if the user selects something in each of these fields 2 more select boxes will generate directly below them. and on and on and on......
Does anyone have any thoughts on the best way to approach this... Thanks.
-Brett
-
May 21, 2002, 11:46 #2
- Join Date
- Jan 2001
- Location
- Lawrence, Kansas
- Posts
- 2,066
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Sounds like you're going to need some quite complicated DOM manipulation (I hope you don't need this to work in NS4
)
The easiest way to do this would be to (ab)use innerHTML - create a named <div> and call document.getElementByID('divname').innerHTML = variable where variable is a string you have prepared containing the HTML for the select element(s) you want to display in the <div>. You could also do this by adding nodes to the DOm directly which is more standards compliant (innerHTML is not a w3 standard) but also a lot harder.
www.w3schools.com should be able to fill you in on the details.
-
May 21, 2002, 11:56 #3
- Join Date
- Feb 2002
- Location
- Gatwick, UK
- Posts
- 1,206
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Just use a tr/divider (which ever applies).
ie:
You have three rows in a table, the first two are inputs, the third one is a plus button ( the onclick for the initial plus button must be addRow.
Code:var field_names=new Array('first_field_','second_field'); var c_i=1; function addRow(){ var nTr=document.all.table.insertRow(); c_i++; for (var i=0;i<4;i++){ var nTd=nTr.insertCell(); if (i != 3){ var nIp=document.createElement('INPUT'); with (nIp){ id=fields[i]+c_i; name=fields[i]+c_i; size=20; } } else { var nInp=document.createElement('IMG'); with (nImp){ src='/icons/myplus.gif'; style.cursor='hand'; onclick=addRow } } Td.appendChild(nImp); } event.srcElement.style.display='none'; }
Flawless---=| If you're going to buy a pet - get a Shetland Giraffe |=---
-
May 22, 2002, 08:00 #4
- Join Date
- Sep 2000
- Location
- Chicago
- Posts
- 526
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thank You,
Flawless - I am having a heck of a time finding information on the table object. I am guessing I need to do something like this:
<table id='myTable'>
<input type=button onclick='addRow();'>
then referencing add row by
document.getElementById('myTable')
this then has a value of null and am having a hard time putting this together. Any sugestions?
Thanks,
-BrettLast edited by goughb; May 22, 2002 at 08:14.
-
May 22, 2002, 08:08 #5
- Join Date
- Feb 2002
- Location
- Gatwick, UK
- Posts
- 1,206
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Well to start off with your table should look like this:
Code:<table id="My_table" name="My_Table"> <tr> <td> <input type="text"> </td> <td> <input type="text"> </td> <td> <img src="/wherever/gfx/icon.gif" onclick="addRow();"> </td> </tr> </table>
i'll do you a mockup
Flawless---=| If you're going to buy a pet - get a Shetland Giraffe |=---
-
May 22, 2002, 08:44 #6
- Join Date
- Sep 2000
- Location
- Chicago
- Posts
- 526
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Ok, gotcha now the table object, which seems to be a mystery amongst anything I have searched for in the relm of the web.. =)
A mockup would be great I would sincerely appreciate it or point me to a site that I can get information on the table object.
Thank you sooooo much..
-Brett
-
May 22, 2002, 09:41 #7
- Join Date
- Feb 2002
- Location
- Gatwick, UK
- Posts
- 1,206
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
No problem
http://www.passway.org/Mockup_goughb.html
Flawless---=| If you're going to buy a pet - get a Shetland Giraffe |=---
-
May 22, 2002, 09:54 #8
- Join Date
- Sep 2000
- Location
- Chicago
- Posts
- 526
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Awesome, how would I do this with two select fields instead of 2 input fields? Specifically how would I put the options in each time?.
-Brett
I owe ya!Last edited by goughb; May 22, 2002 at 09:57.
-
May 22, 2002, 10:05 #9
- Join Date
- Feb 2002
- Location
- Gatwick, UK
- Posts
- 1,206
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
create a select instead of a input...
if it's the same select every time then create the object OUTSIDE the funciton so it only exists once - and then append it each time.
Ask if you need more info on this.
Flawless---=| If you're going to buy a pet - get a Shetland Giraffe |=---
-
May 22, 2002, 13:54 #10
- Join Date
- Sep 2000
- Location
- Chicago
- Posts
- 526
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks again flawless everything is working perfectly! One last question. With javascript how do you assign a style to a select element. Specifically a class.. I tried adding class= in the with statement but it doesn't like that..=)
Thanks,
Brett
-
May 22, 2002, 13:59 #11
- Join Date
- Feb 2002
- Location
- Gatwick, UK
- Posts
- 1,206
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
You can access the rule info (style) via
document.object.style.attribute=
You can change the class using
document.object.className=
The method goes hand in hand with this:
collection=document.getElementByTagName('SPAN');
for (i=0;i<collection.length;i++){
if (collection[i].className=='bla') action;
}
Hope this helps
Flawless---=| If you're going to buy a pet - get a Shetland Giraffe |=---
Bookmarks