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 8 of 8
  1. #1
    New Coder
    Join Date
    Sep 2002
    Location
    Charlotte
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Add another table row if input box has a value

    Can this be done? If the user selects a value from a drop down box another row is created.

  • #2
    New Coder
    Join Date
    Sep 2002
    Location
    Charlotte
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbulb Maybe an example would help?

    <Table>
    <TR>
    <TD>
    <Select name="pick one">
    <option value="">Select an Employee</option>
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
    <TD><input name="sometextbox"></TD>
    <TD><input name="sometextbox"></TD>
    <TD><input name="sometextbox"></TD>
    </TR>
    </Select>

    <!--If the user picks an option then create the same table row-->

    <TR>
    <TD>
    <Select name="pick one">
    <option value="">Select an Employee</option>
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
    <TD><input name="sometextbox"></TD>
    <TD><input name="sometextbox"></TD>
    <TD><input name="sometextbox"></TD>
    </TR>
    </Select>

    <!--If the user picks an option then create the same table row-->

    <TR>
    <TD>
    <Select name="pick one">
    <option value="">Select an Employee</option>
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
    <TD><input name="sometextbox"></TD>
    <TD><input name="sometextbox"></TD>
    <TD><input name="sometextbox"></TD>
    </TR>
    </Select>

  • #3
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    410
    Thanks
    2
    Thanked 32 Times in 32 Posts
    I added a unique name of r each of the form elements, otherwise you will not be able to reference them easily. Tested on IE 6 and Mozilla 1.4


    <html>
    <head>
    <script language="JavaScript">
    <!--
    var ELpntr=1;
    var content1='';
    var content2='<input type="text" name="text'+ELpntr+'A">';
    var content3='<input type="text" name="text'+ELpntr+'B">';
    var content4='<input type="text" name="text'+ELpntr+'C">';
    function addRow()
    {
    ELpntr++;
    content1='<select name="pick'+ELpntr+'" onChange="addRow()">';
    content1+='<option value"" selected>Select an Employee</option>';
    content1+='<option value"Option 1">Option 1</option>';
    content1+='<option value"Option 2">Option 2</option></select>';
    tabBody=document.getElementsByTagName("TBODY").item(0);
    row=document.createElement("TR");
    cell1 = document.createElement("TD");
    cell2 = document.createElement("TD");
    cell3 = document.createElement("TD");
    cell4 = document.createElement("TD");
    cell1.innerHTML=content1;
    cell2.innerHTML=content2;
    cell3.innerHTML=content3;
    cell4.innerHTML=content4;
    row.appendChild(cell1);
    row.appendChild(cell2);
    row.appendChild(cell3);
    row.appendChild(cell4);
    tabBody.appendChild(row);
    }
    //-->
    </script>

    </head>
    <body>
    <form>
    <table border='1' id='mytable'>
    <tbody>
    <TR>
    <TD>
    <Select name="pick1" onChange="addRow()">
    <option value="">Select an Employee</option>
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
    </select>
    </td>
    <TD><input name="text1A"></TD>
    <TD><input name="text1B"></TD>
    <TD><input name="text1C"></TD>
    </TR>

    </tbody>
    </table>
    </form>
    </body>
    </html>
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #4
    New Coder
    Join Date
    Sep 2002
    Location
    Charlotte
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts

    That is what I am looking for but.........

    I can't define all my options because they are being pulled from a database. Is there some what to just say if the option value contains anything create another table row. Same of my option list, which will list all sales reps.

    <table border=1 cellpadding=0 cellspacing=0">
    <td>
    <% set conntemp=server.createobject("adodb.connection")
    conntemp.open DSNCompany

    SQL="Select eepnamelast,eepnamefirst from Emppers order by eepnamelast"
    set rstemp=conntemp.execute(SQL)

    Response.write "<select name=""SalesStaff"" onChange=""addRow()"">"

    'This loop creates all the options
    do until rstemp.eof
    Response.Write "<option value=""></option><option Value="""& rstemp("eepnamelast")& """>" & _
    rstemp("eepnamelast") & "_" & rstemp("eepnamefirst") & _
    "</option>"

    rstemp.movenext

    Loop

    'This closes the select list
    Response.write "</select></td>"

    %>

    <td><font size=-1 ><input name="Reff_Bonus value="<%=Reff_Bonus%>"></TD>
    <td><font size=-1 ><input name="Lead_Bonus size="1" value="<%=Lead_Bonus%>"></TD>
    <td><font size=-1 ><input name="Chrg_Dept" size="4" value="<%=Chrg_Dept%>"></TD>
    <td><font size=-1 ><input name="Comm" size="4" value="<%=Comm%>"></TD>
    <td><font size=-1 ><input name="Gty_Comm" size="4" value="<%=Gty_Comm%>"></TD>
    <td><font size=-1 ><input name="Adv_Comm" size="4" value="<%=Adv_Comm%>"></TD>
    <td><font size=-1 ><input name="PTO_Dollars" size="4" value="<%=PTO_Dollars%>"></TD>
    </TR>
    </table>

  • #5
    New Coder
    Join Date
    Sep 2002
    Location
    Charlotte
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Kinda works but adds the rows to the top of the table

    Also the drop down box is empty, I guess because it doesn't run the SQL querry each time.

    <table border=1 cellpadding=0 cellspacing=0" ID="Sales">
    <Script>

    var ELpntr=1;
    var content1='';
    var content2='<input name="Reff_Bonus'+ELpntr+'A">';
    var content3='<input name="Lead_Bonus'+ELpntr+'B">';
    var content4='<input name="Chrg_Dept'+ELpntr+'C">';
    var content5='<input name="Comm'+ELpntr+'D">';
    var content6='<input name="Gty_Comm'+ELpntr+'E">';
    var content7='<input name="Adv_Comm'+ELpntr+'F">';
    var content8='<input name="PTO_Dollars'+ELpntr+'G">';
    var content9='<input name="Gty_Comm'+ELpntr+'H">';

    function addRow()
    {
    ELpntr++;
    content1='<select name="SalesStaff'+ELpntr+'" onChange="addRow()">';
    tabBody=document.getElementsByTagName("TBODY").item(0);
    row=document.createElement("TR");
    cell1 = document.createElement("TD");
    cell2 = document.createElement("TD");
    cell3 = document.createElement("TD");
    cell4 = document.createElement("TD");
    cell5 = document.createElement("TD");
    cell6 = document.createElement("TD");
    cell7 = document.createElement("TD");
    cell8 = document.createElement("TD");
    cell9 = document.createElement("TD");
    cell1.innerHTML=content1;
    cell2.innerHTML=content2;
    cell3.innerHTML=content3;
    cell4.innerHTML=content4;
    cell5.innerHTML=content5;
    cell6.innerHTML=content6;
    cell7.innerHTML=content7;
    cell8.innerHTML=content8;
    cell9.innerHTML=content9;
    row.appendChild(cell1);
    row.appendChild(cell2);
    row.appendChild(cell3);
    row.appendChild(cell4);
    row.appendChild(cell5);
    row.appendChild(cell6);
    row.appendChild(cell7);
    row.appendChild(cell8);
    row.appendChild(cell9);
    tabBody.appendChild(row);
    }
    //-->
    </script>

    <td>
    <% set conntemp=server.createobject("adodb.connection")
    conntemp.open DSNCompany

    SQL="Select eepnamelast,eepnamefirst from Emppers order by eepnamelast"
    set rstemp=conntemp.execute(SQL)

    Response.write "<select name=""SalesStaff"" onChange=""addRow()""><option value=""></option>"

    'This loop creates all the options
    do until rstemp.eof
    Response.Write "<option value=""></option><option Value="""& rstemp("eepnamelast")& """>" & _
    rstemp("eepnamelast") & "_" & rstemp("eepnamefirst") & _
    "</option>"

    rstemp.movenext

    Loop

    'This closes the select list
    Response.write "</select></td>"

    %>

    <td><font size=-1 ><input name="Reff_Bonus value="<%=Reff_Bonus%>"></TD>
    <td><font size=-1 ><input name="Lead_Bonus size="1" value="<%=Lead_Bonus%>"></TD>
    <td><font size=-1 ><input name="Chrg_Dept" size="4" value="<%=Chrg_Dept%>"></TD>
    <td><font size=-1 ><input name="Comm" size="4" value="<%=Comm%>"></TD>
    <td><font size=-1 ><input name="Gty_Comm" size="4" value="<%=Gty_Comm%>"></TD>
    <td><font size=-1 ><input name="Adv_Comm" size="4" value="<%=Adv_Comm%>"></TD>
    <td><font size=-1 ><input name="PTO_Dollars" size="4" value="<%=PTO_Dollars%>"></TD>
    </TR>
    </table>

  • #6
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    410
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Your server side code does not do any good once you are on teh client. IF teh data is variable, then it needs to be genrated into JavaScript arrays and sent across.

    You can use that script to put anyting you want in the cells, anyou can test any condition to want to determine whether to add the row; but ALL the information has to be on the page before the server sends it across and organized in a manner that the cleint can use
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #7
    New Coder
    Join Date
    Sep 2002
    Location
    Charlotte
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up You are correct!!!

    I did have to create a Java Script array but now I am having trouble get it work on the create row function.

    <table border=1 cellpadding=0 cellspacing=0" width="800px" ID="OASales">
    <SCRIPT Language="JavaScript">

    var employees = new Array(
    <%

    set conntemp=server.createobject("adodb.connection")
    conntemp.open DSNCompany

    SQL="Select eepnamelast,eepnamefirst from (Emppers Inner Join Empcomp ON(empcomp.EecEmplStatus <>'T' AND emppers.eepeeid=empcomp.eeceeid)) order by eepnamelast"
    set rstemp = conntemp.execute(SQL)
    Do Until rstemp.EOF
    %>

    new Array( "<%=rstemp("eepnamelast")%>", "<%=rstemp("eepnamefirst")%>" ),

    <%

    rstemp.MoveNext


    optSuffix = "</OPTION>" & vbNewLine
    valPrefix = "<OPTION Value='"
    valSuffix = "'>"

    opts = rstemp.GetString( , , valSuffix, optSuffix & valPrefix)
    opts = valPrefix & Left( opts, Len(opts)-Len(valPrefix) )

    Loop

    rstemp.Close
    set rstemp=nothing
    conntemp.Close
    Set conntemp = nothing

    varOptions= vbNewLine & opts

    %>

    null
    );

    var ELpntr=1;
    var content1='<select name="SalesStaff'+ELpntr+'"><%=varOptions%></select>'; //I get an error on this line everytime!
    var content2='<input size=9 name="Reff_Bonus'+ELpntr+'A">';
    var content3='<input size=9 name="Lead_Bonus'+ELpntr+'B">';
    var content4='<input size=9 name="Chrg_Dept'+ELpntr+'C">';
    var content5='<input size=9 name="Comm'+ELpntr+'D">';
    var content6='<input size=9 name="Gty_Comm'+ELpntr+'E">';
    var content7='<input size=9 name="Adv_Comm'+ELpntr+'F">';
    var content8='<input size=9 name="PTO_Dollars'+ELpntr+'G">';
    var content9='<input size=9 name="Gty_Comm'+ELpntr+'H">';

    function addRow()
    {
    ELpntr++;

    tb=document.createElement("TBODY");
    document.getElementById("OASales").appendChild(tb);
    row=document.createElement("TR");
    cell1 = document.createElement("TD");
    cell2 = document.createElement("TD");
    cell3 = document.createElement("TD");
    cell4 = document.createElement("TD");
    cell5 = document.createElement("TD");
    cell6 = document.createElement("TD");
    cell7 = document.createElement("TD");
    cell8 = document.createElement("TD");
    cell9 = document.createElement();
    cell1.innerHTML=content1;
    cell2.innerHTML=content2;
    cell3.innerHTML=content3;
    cell4.innerHTML=content4;
    cell5.innerHTML=content5;
    cell6.innerHTML=content6;
    cell7.innerHTML=content7;
    cell8.innerHTML=content8;
    cell9.innerHTML=content9;
    row.appendChild(cell1);
    row.appendChild(cell2);
    row.appendChild(cell3);
    row.appendChild(cell4);
    row.appendChild(cell5);
    row.appendChild(cell6);
    row.appendChild(cell7);
    row.appendChild(cell8);
    row.appendChild(cell9);
    tabBody=document.getElementsByTagName("TBODY").item(2);
    tabBody.appendChild(row);
    }
    </script>
    Last edited by dan18088; 10-13-2003 at 12:19 AM.

  • #8
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    410
    Thanks
    2
    Thanked 32 Times in 32 Posts
    var content1='<select name="SalesStaff'+ELpntr+'"><%=varOptions%></select>'; //I get an error on this line

    Throws and error because the client side variable means absolutely nothing to the client side script. The option has to refer to the client side array that contains the string you want there. whatever is being generated there by VBscript is not understood by JavaScript you need to have an array that looks like:

    varOptions new Array();
    varOptions[0] ='<option value="xxxxxx">xxxxxx</option>';
    varOptions[1] ='<option value="xxxxxx">xxxxxx</option>';
    varOptions[2] ='<option value="xxxxxx">xxxxxx</option>';
    varOptions[3] ='<option value="xxxxxx">xxxxxx</option>';

    Then the line in script is:

    var content1='<select name="SalesStaff'+ELpntr+'">'
    for (i=0;i<varOptions.length;i++)
    {
    content1+=varOptions[i];
    }
    content1+='</select>';
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&


  •  

    Posting Permissions

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