Automagically generate form fields

[goughb]

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

[Skunk]

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.

[Flawless_koder]

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.

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';
       }

This is a very simple example - but i hope it shows you a rudementary example of how you could do this.

Flawless

[goughb]

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,

-Brett

[Flawless_koder]

Well to start off with your table should look like this:

<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>

Hope this helps... if you need more let me know,
i'll do you a mockup

Flawless

[goughb]

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

[Flawless_koder]

No problem

http://www.passway.org/Mockup_goughb.html


Flawless

[goughb]

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!

[Flawless_koder]

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

[goughb]

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

[Flawless_koder]

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