Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    auto populate form with javascript

    I have a select field with a drop down menu where you can select the number 1 through 9. Basically this field is used to determne the number of names that will be entered into the form. Example, if you select 5, then the form will need to have places for you to enter those names. So here's my info on this form:


    I have a form
    <form name="request">

    I have a select field
    <select name="select">
    <option value="Select one">Select one
    <option value="1">1
    <option value="2">2
    <option value="3">3
    <option value="4">4
    <option value="5">5
    <option value="6">6
    <option value="7">7
    <option value="8">8
    <option value="9">9
    </select>

    And I have a table row already created which should be the default table row already displayed in the form.

    <tr>
    <td width="132" height="45" valign="top">*Last Name 1<br>
    <input name="lname1" type="text" id="lname1" value="" size="18" maxlength="18"></td>
    <td height="45" valign="top>First Name 1:<br>
    <input name="fname1" type="text" id="fname1" value="" size="18" maxlength="22"></td>
    </tr>

    Basically, when the user selects another number for the select field ("number"), say the number 5, I wll need to have 5 table rows instead of the 1 that's already displayed. So what I need to figure out is how to do that?

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    You may try something starting from this DOM example:

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <
    html>
    <
    head>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    meta http-equiv="Content-Style-Type" content="text/css">
    <
    meta http-equiv="Content-Script-Type" content="text/javascript">
    <
    script language="JavaScript" type="text/JavaScript">
    function 
    insR(s){
    if(
    s>1){//if selected index>1
    var rRows document.getElementById('tab').getElementsByTagName('tr');//rows collection
    var root rRows[0].parentNode;//the root
    var ind rRows.length+1;//the indent's base for names/id's
    var lens-rRows.length;//loop limit
    if(len>0){//to create extra rows
    for(var i=0;i<len;i++){
    var 
    cloneR rRows[0].cloneNode(true);//clones the first row
    var cloneC cloneR.getElementsByTagName('td');//the cells collection of the clone
    var cloneI cloneR.getElementsByTagName('input');//the fields collection of the clone
    for(var j=0;j<cloneI.length;j++){
    cloneI[j].setAttribute('value','');//sets the values to ''
    cloneC[j].removeChild(cloneC[j].firstChild)//removes the text nodes
    }
    var 
    nr ind+i;//the indent
    cloneI[0].setAttribute('name','lname'+nr);//indents the name
    cloneI[0].setAttribute('id','lname'+nr);//indents the id
    cloneI[1].setAttribute('name','fname'+nr);//indents the name
    cloneI[1].setAttribute('id','fname'+nr);//indents the id
    var txt1 document.createTextNode('*Last Name '+nr+':');//creates text
    var txt2 document.createTextNode('First Name '+nr+':');//creates text
    cloneC[0].insertBefore(txt1,cloneC[0].getElementsByTagName('br')[0]);//inserts text
    cloneC[1].insertBefore(txt2,cloneC[1].getElementsByTagName('br')[0]);//inserts text
    root.appendChild(cloneR);//appends the new row
    }
    }
    }
    }
    </script>
    </head>
    <body>
    <form>
    <select name="select" onchange="insR(this.selectedIndex)">
    <option value="Select one">Select one
    <option value="1">1
    <option value="2">2
    <option value="3">3
    <option value="4">4
    <option value="5">5
    <option value="6">6
    <option value="7">7
    <option value="8">8
    <option value="9">9
    </select><br>
    <br>
    <table id="tab">
    <tbody>
    <tr>
    <td width="132" height="45" valign="top">*Last Name 1:<br>
    <input name="lname1" type="text" id="lname1" value="" size="18" maxlength="18"></td>
    <td height="45" valign="top">First Name 1:<br>
    <input name="fname1" type="text" id="fname1" value="" size="18" maxlength="22"></td>
    </tr>
    </tbody>
    </table>
    </form>
    </body>
    </html> 
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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