Add another table row if input box has a value

dan18088 · 10-10-2003, 10:53 PM

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

dan18088 · 10-11-2003, 06:03 PM

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



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



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

COBOLdinosaur · 10-11-2003, 11:30 PM

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

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

dan18088 · 10-11-2003, 11:55 PM

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>

dan18088 · 10-12-2003, 12:20 AM

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>

COBOLdinosaur · 10-12-2003, 08:17 PM

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

dan18088 · 10-13-2003, 12:17 AM

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>

COBOLdinosaur · 10-14-2003, 10:56 PM

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