SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Evangelist goughb's Avatar
    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

  2. #2
    SitePoint Columnist Skunk's Avatar
    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.

  3. #3
    Perl/Mason Guru Flawless_koder's Avatar
    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';
           }
    This is a very simple example - but i hope it shows you a rudementary example of how you could do this.

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  4. #4
    SitePoint Evangelist goughb's Avatar
    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,

    -Brett
    Last edited by goughb; May 22, 2002 at 07:14.

  5. #5
    Perl/Mason Guru Flawless_koder's Avatar
    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>
    Hope this helps... if you need more let me know,
    i'll do you a mockup

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  6. #6
    SitePoint Evangelist goughb's Avatar
    Join Date
    Sep 2000
    Location
    Chicago
    Posts
    526
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    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

  7. #7
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  8. #8
    SitePoint Evangelist goughb's Avatar
    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 08:57.

  9. #9
    Perl/Mason Guru Flawless_koder's Avatar
    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 |=---

  10. #10
    SitePoint Evangelist goughb's Avatar
    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

  11. #11
    Perl/Mason Guru Flawless_koder's Avatar
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •