How to dynamically add new feilds to form

I have a two part form. The first form has the fields that will update the DB and the second form is from a hyperlink from th first. The second form is a search page that allows the user to do a search and choose an item from the results which then populates a field on the first form. The problem is, if a user chooses to do a search on a second keyword and selects the item to add to the first form, the original line gets over written. What I want to see happen is that a new line (form row) gets created with the selected data. The first form also needs top have the ability for the user to manually add data with out any search. The DB I am using is MySQL. Any help on this would be great. I have the code from the two forms posted below...

Mark
addparts.asp
_______________________________________________________
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
 
<!--#include file="Connections/WOT.asp" -->
<%
Dim rs1WO__MMColParam
rs1WO__MMColParam = "1"
If (Session("WOID") <> "") Then 
  rs1WO__MMColParam = Session("WOID")
End If
%>
<%
Dim rs1WO
Dim rs1WO_cmd
Dim rs1WO_numRows
 
Set rs1WO_cmd = Server.CreateObject ("ADODB.Command")
rs1WO_cmd.ActiveConnection = MM_WOT_STRING
rs1WO_cmd.CommandText = "SELECT ID, WONUM FROM wot.wo WHERE ID = ?" 
rs1WO_cmd.Prepared = true
rs1WO_cmd.Parameters.Append rs1WO_cmd.CreateParameter("param1", 5, 1, -1, rs1WO__MMColParam) ' adDouble
 
Set rs1WO = rs1WO_cmd.Execute
rs1WO_numRows = 0
%>
 
<SCRIPT LANGUAGE=javascript>
<!--
function clearFields(){
     var objForm = document.forms[0]
     for(i=0;i<objForm.elements.length;i++){
          if(objForm.elements[i].type=="text"){
               objForm.elements[i].value = "";
          }
          if(objForm.elements[i].type=="select-one"){
               objForm.elements[i].selectedIndex = 0;
          }
          if(objForm.elements[i].type=="checkbox"){
               objForm.elements[i].selected = false;
          }
          if(objForm.elements[i].type=="radio"){
               objForm.elements[i].selected = false;
          }
     }
}
//-->
</SCRIPT>
 
 
 
 
 
 
 
<% Response.Buffer = True %>
<%
Dim rs1__MMColParam
rs1__MMColParam = "1"
If (Request.QueryString("partnumid") <> "") Then 
  rs1__MMColParam = Request.QueryString("partnumid")
End If
%>
<%
Dim rs1
Dim rs1_cmd
Dim rs1_numRows
 
Set rs1_cmd = Server.CreateObject ("ADODB.Command")
rs1_cmd.ActiveConnection = MM_WOT_STRING
rs1_cmd.CommandText = "SELECT ID, partnum, partdesc, bin FROM wot.inv WHERE ID = ?" 
rs1_cmd.Prepared = true
rs1_cmd.Parameters.Append rs1_cmd.CreateParameter("param1", 5, 1, -1, rs1__MMColParam) ' adDouble
'response.write(rs1_cmd.CommandText)
Set rs1 = rs1_cmd.Execute
rs1_numRows = 0
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.style5 {
	font-size: 24px;
	color: #FF0000;
	font-weight: bold;
}
-->
</style>
</head>
 
<body>
 
<% 'response.write(Request.QueryString("partnumid"))
Dpartnumid=Request.QueryString("partnumid")
%>
 
<form id="addparts" name="addparts" method="post" action="addparts_process.asp">
  <table width="87%" border="0" cellspacing="0" cellpadding="1">
    <tr bgcolor="#FFCC00">
      <th width="14%">Part Number </th>
      <th width="59%">Description</th>
      <th width="8%">Bin</th>
      <th width="19%">Quantity</th>
    </tr>
    <tr>
      <td><div align="center">
<% If Dpartnumid <> "" Then
	'do until rs1.EOF
%> 
        <input name="partnum" type="text" id="partnum"  value="<%=(rs1.Fields.Item("partnum").Value)%>" size="20" />
      </div></td>
      <td>
        <div align="left">
          <input name="partdesc" type="text" id="partdesc" value="<%=(rs1.Fields.Item("partdesc").Value)%>" size="90" />
        </div></td>
 
      <td><div align="center">
        <input name="bin" type="text" id="bin" value="<%=(rs1.Fields.Item("bin").Value)%>" size="10" />
      </div></td>
      <td><div align="center">
        <input name="qty" type="text" id="qty" size="10" />
      </div></td>
 
<% End IF %>	  
    </tr>
    <tr>
      <td><div align="center">
        <input name="partnum1" type="text" id="partnum1" size="20" />
      </div></td>
      <td><input name="partdesc1" type="text" id="partdesc1" size="90" /></td>
      <td><div align="center">
        <input name="bin1" type="text" id="bin1" size="10" />
      </div></td>
      <td><div align="center">
        <input name="qty1" type="text" id="qty1" size="10" />
      </div></td>
    </tr>
    <tr>
      <td><div align="center">
        <input name="partnum2" type="text" id="partnum2" size="20" />
      </div></td>
      <td><input name="partdesc2" type="text" id="partdesc2" size="90" /></td>
      <td><div align="center">
        <input name="bin2" type="text" id="bin2" size="10" />
      </div></td>
      <td><div align="center">
        <input name="qty2" type="text" id="qty2" size="10" />
      </div></td>
    </tr>
    <tr>
      <td><div align="center">
        <input name="partnum3" type="text" id="partnum3" size="20" />
      </div></td>
      <td><input name="partdesc3" type="text" id="partdesc3" size="90" /></td>
      <td><div align="center">
        <input name="bin3" type="text" id="bin3" size="10" />
      </div></td>
      <td><div align="center">
        <input name="qty3" type="text" id="qty3" size="10" />
      </div></td>
    </tr>
    <tr>
      <td><div align="center">
        <input name="partnum4" type="text" id="partnum4" size="20" />
      </div></td>
      <td><input name="partdesc4" type="text" id="partdesc4" size="90" /></td>
      <td><div align="center">
        <input name="bin4" type="text" id="bin4" size="10" />
      </div></td>
      <td><div align="center">
        <input name="qty4" type="text" id="qty4" size="10" />
      </div></td>
    </tr>
    <tr>
      <td><div align="center">
        <input name="partnum5" type="text" id="partnum5" size="20" />
      </div></td>
      <td><input name="partdesc5" type="text" id="partdesc5" size="90" /></td>
      <td><div align="center">
        <input name="bin5" type="text" id="bin5" size="10" />
      </div></td>
      <td><div align="center">
        <input name="qty5" type="text" id="qty5" size="10" />
      </div></td>
    </tr>
    <tr>
      <td><div align="center">
        <input name="partnum6" type="text" id="partnum6" size="20" />
      </div></td>
      <td><input name="partdesc6" type="text" id="partdesc6" size="90" /></td>
      <td><div align="center">
        <input name="bin6" type="text" id="bin6" size="10" />
      </div></td>
      <td><div align="center">
        <input name="qty6" type="text" id="qty6" size="10" />
      </div></td>
    </tr>
    <tr>
      <td><div align="center">
        <input name="partnum7" type="text" id="partnum7" size="20" />
      </div></td>
      <td><input name="partdesc7" type="text" id="partdesc7" size="90" /></td>
      <td><div align="center">
        <input name="bin7" type="text" id="bin7" size="10" />
      </div></td>
      <td><div align="center">
        <input name="qty7" type="text" id="qty7" size="10" />
      </div></td>
    </tr>
    <tr bgcolor="#CCCCCC">
      <td bgcolor="#FFFFFF"><div align="center">
        <input name="partnum8" type="text" id="partnum8" size="20" />
      </div></td>
      <td bgcolor="#FFFFFF"><input name="partdesc8" type="text" id="partdesc8" size="90" /></td>
      <td align="center" valign="bottom" bgcolor="#FFFFFF"><div align="center">
        <input name="bin8" type="text" id="bin8" size="10" />
      </div></td>
      <td bgcolor="#FFFFFF"><div align="center">
        <input name="qty8" type="text" id="qty8" size="10" />
      </div></td>
    </tr>
    <tr bgcolor="#FFCC00">
      <td><input type="button" name="Submit2" value="Search Parts" onClick="window.location='searchparts.asp'"/></td>
      <td><div align="right">
        <input type="submit" name="Submit" value="Submit" />&nbsp;&nbsp;&nbsp;
        <input name="Clear" type="reset" id="Clear" onCLick="clearFields()" value="Clear" />
      </div></td>
      <td align="center" valign="bottom">&nbsp;</td>
      <td><input name="wonum" type="hidden" id="wonum" value="<%=(rs1WO.Fields.Item("WONUM").Value)%>"/></td>
    </tr>
  </table>
</form>
 
<p>&nbsp;</p>
<p>
  <input name="btnBack" type="button" onClick="window.location='partslist.asp?<%= "ID=" & Session("WOID") %>'" value="Back to Work Order"/>
  
</p>
</body>
</html>
<%
rs1WO.Close()
Set rs1WO = Nothing
%>
<%
rs1.Close()
Set rs1 = Nothing
%>
 
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
 
searchparts.asp
_____________________________________________________________
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<!--#include file="Connections/WOT.asp" -->
<% Response.Buffer = True %>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Parts Search Page</title>
</head>
 
<body>
<%
Dim rs1
Dim rs1_cmd
Dim rs1_numRows
 
Set rs1_cmd = Server.CreateObject ("ADODB.Command")
rs1_cmd.ActiveConnection = MM_WOT_STRING
rs1_cmd.CommandText = "SELECT * FROM wot.inv" 
rs1_cmd.Prepared = true
 
Set rs1 = rs1_cmd.Execute
rs1_numRows = 0
'desc=request.form("partdesc")
'partnum=request.form("partnum")
'vendor=request.form("vendor")
%>
<p>&nbsp;</p>
<form id="form1" name="form1" method="post" action="">
  <table width="50%" border="0" cellspacing="0" cellpadding="1">
    <tr>
      <td><div align="right">Description:</div></td>
      <td><input name="partdesc" type="text" id="partdesc" size="50" /></td>
    </tr>
    <tr>
      <td><div align="right">Part Number: </div></td>
      <td><input name="partnum" type="text" id="partnum" size="50" /></td>
    </tr>
    <tr>
      <td><div align="right">Vendor:</div></td>
      <td><input name="vendor" type="text" id="vendor" size="50" /></td>
    </tr>
    <tr>
      <td><div align="right">Manufacturer</div></td>
      <td><input name="manufacturer" type="text" id="manufacturer" size="50" /></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><div align="right">
        <input name="search" type="submit" id="search" value="Search" />
      </div></td>
    </tr>
  </table>
<%
rs1.Close()
Set rs1 = Nothing
%>  
</form>
<table width="100%" border="0" cellspacing="0" cellpadding="1" >
  <tr bgcolor="#FFCC00">
    <th width="16%"><div align="left">Part Number </div></th>
    <th width="44%"><div align="left">Description</div></th>
    <th width="20%"><div align="left">Vendor</div></th>
    <th width="20%"><div align="left">Manufacturer</div></th>
  </tr>
 
<%
if request.form("search")="Search" then
	Dim rs2
	Dim rs2_cmd
	Dim rs2_numRows
	Dim sql
	'sql="SELECT * FROM wot.inv "
	sql="SELECT * FROM wot.inv WHERE "
	Set rs2_cmd = Server.CreateObject ("ADODB.Command")
	rs2_cmd.ActiveConnection = MM_WOT_STRING
	
	If request.form("partdesc") <> "" Then sql= sql & " partdesc LIKE '%" + request.form("partdesc")+ "%'and "
	If request.form("partnum") <> "" Then sql= sql & " partnum LIKE '%" + request.form("partnum")+ "%'and "
	If request.form("vendor") <> "" Then sql= sql & " vendor LIKE '%" + request.form("vendor")+ "%'and "
	If request.form("manufacturer") <> "" Then sql= sql & " manufacturer LIKE '%" + request.form("manufacturer")+ "%'and "
	sql=sql & "1=1"
	'If request.form("partdesc") <> "" Then WhereClause= "or partdesc LIKE '%" + request.form("partdesc")+ "%'"
	'If request.form("partnum") <> "" Then WhereClause= "or partnum LIKE '%" + request.form("partnum")+ "%'"
	'If request.form("vendor") <> "" Then WhereClause= "or vendor LIKE '%" + request.form("vendor")+ "%'"
	'If WhereClause <> "" Then
		'WhereClause = "WHERE " & Mid(WhereClause,4)'Strip off the 1st 'or'
	'End If
	'rs2_cmd.CommandText = sql & WhereClause
	rs2_cmd.CommandText = sql
	'End If
	rs2_cmd.Prepared = true
	
'response.write(rs2_cmd.CommandText)	
 
	Set rs2 = rs2_cmd.Execute
	rs2_numRows = 0
 
%>
<%
Dpartnum=rs2.fields.item("partnum")
Dselection="<a href=addparts.asp?partnum=" & rs2.fields.item("ID") & ">SELECT</a>"
%>
<%
do until rs2.EOF
	response.write("<tr>")
	response.write("<td>") & "<a href=addparts.asp?partnumid=" & rs2.fields.item("ID") & ">"& rs2.fields.item("partnum") &"</a>" & ("</td>")
	'response.write("<td>" & rs2.fields("partnum") & "</td>")
	response.write("<td>" & rs2.fields.item("partdesc") & "</td>")
	response.write("<td>" & rs2.fields.item("vendor") & "</td>")
	response.write("<td>" & rs2.fields.item("manufacturer") & "</td>")
	'response.write("<td>") & "<a href=addparts.asp?partnumid=" & rs2.fields.item("ID") & ">SELECT</a>" & ("</td>")
	'response.write("<td>" & Dselection & "</td>") 
	response.write("</tr>")
	rs2.MoveNext
loop
'response.write(Dpartnum)
 
rs2.Close()
Set rs2 = Nothing
%>
</table>
<% end if %>
<p>&nbsp;
<%'response.write(request.form("desc"))%>
</p>
  <input name="btnBack" type="button" onClick="window.location='addparts.asp?<%= "ID=" & Session("WOID") %>'" value="Back to Add Parts Page"/>
</body>
</html>

Open in new window

LVL 1
Mark SkrodzkiSenior Systems EngineerAsked:
Who is Participating?
 
slamhoundCommented:
The issue is that you have an extra cell <td></td> in the body that isn't matched by an extra cell in the <div> code. And you can't add the extra </td><td> to the <div> code because the JavaScript is adding this code to a table cell so strips it out as not belonging there.

You're best bet is to rework the format (see the code below) or insert the new line as a table row or a different <div>.

<html>
<head>
<script>
var fldNum=0
function addRow(theButton){
  theTabBody=theButton.parentNode.parentNode.parentNode;
  oldRow=theButton.parentNode.parentNode;
  newRow=oldRow.cloneNode(false);
  newRow.style.background='white';
  newCell=document.createElement('TD');
  newCell.innerHTML=document.getElementById('tplFrm').innerHTML//.replace(/\#/g,++fldNum);
  newRow.appendChild(newCell);
  theTabBody.insertBefore(newRow,oldRow);
  // newRow.swapNode(oldRow);
  alert(theTabBody.innerHTML); // comment this after test
}
function delRow(theButton){
  theButton.parentNode.parentNode.removeNode(true);
}
</script>
</head>
<body>
<div id=tplFrm style="display:none">
<input type=text name=input# size=50>
<select name=sel# onChange="this.parentNode.parentNode.style.background=options[selectedIndex].text">
<option>white
<option>red
<option>blue
<option>yellow
</select>
<input type=button value=Add onClick="addRow(this)">
<input type=button value=Del onClick="delRow(this)">
</div>

<form>
<table border=1>
<tr style="background-color:white"><td><input type=text name=input0 size=50> t e x t  
<select name=sel0 onChange="this.parentNode.parentNode.style.background=options[selectedIndex].text">
<option>white
<option>red
<option>blue
<option>yellow
</select>

<input type=button value=Add onClick="addRow(this)">
<input type=button value=Del onClick="delRow(this)">
</td>
</tr>
</table>
</form>
</body>
</html>
0
 
slamhoundCommented:
"that a new line (form row) gets created with the selected data."

Can this be a list/combo box or do you need a totally new control?
0
 
Mark SkrodzkiSenior Systems EngineerAuthor Commented:
Thank you for your comment. Yes, the new line needs to be a completely new text field row. Just as it would be for a manual entry.
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
slamhoundCommented:
The only way to dynamically add fields would be to use JavaScript something like this:

<script language = "JavaScript">
            html += '<tr><td><input type="text" name="field5" value=""></td></tr>';
            document.getElementById('myListofFields').innerHTML = html;      
</script>
0
 
Mark SkrodzkiSenior Systems EngineerAuthor Commented:
Could you explain what that code does? I am still a novice...
0
 
slamhoundCommented:
You'll probably need a:
Var html;
at the start too.

You build your field in the a variable called html. The += means that it just adds the value to whatevers already in the variable. This way you can have several lines building up the HTML code as you need it.
You then reference something on your page...probably a named <div> (called "myListofFields" or whatever) would be the best. So you get the document element by it's ID and replace the innerHTML of that element with your new HTML.
document.getElementById('myListofFields').innerHTML = html;

this can then add the new HTML to the page (new fields etc) without the page refreshing.
0
 
Mark SkrodzkiSenior Systems EngineerAuthor Commented:
Would you have a working example of this code to understand the function better?
0
 
HonorGodSoftware EngineerCommented:
Well, there's "always more than one way" to do anything, even this.  :-)

Since you are a novice, it might be best if we started with a bit of background information.  The way browsers, in general, work is that when the HTML is received, it is analyzed (parsed) and an equivalent data structure is build by the browser so that the individual portions of the document can be rendered, or displayed according to HTML rules and guidelines.

http://www.w3.org/DOM/
"The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page."

The code snippets provided by slamhound are attempts to provide you with the absolute minimum number of lines needed to resolve your problem.  Unfortunately, the are incomplete, and don't really solve the problem in a manner that can easily be extended or reused.

Another technique would be to have code that is able to locate the portion of the DOM where you want to make changes (e.g., add form rows), and create the appropriate elements to be added to the form, and then add them.

In order to "add" a new row, your code needs to:

- Locate the "parent" where you want to add the row (i.e., the table)
- Create the row element
- Create the column elements, and make them "children" of the newly created row
- Append the newly created row element to the table.

Here is one example that doesn't use the DOM:
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_21009969.html

Here is another technique - using the cloneNode routine to duplicate an existing row:
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_20568977.html
- remember though, that you want to clone an empty row, and after cloning, you need to change any attributes that must be unique (e.g., "id" attributes) for the newly created row
- you may also need to add events to this newly created row, in which case you might want to take a look at this one:
http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20843825.html

This one is pretty complete, and may be of use to you:
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_22933336.html
0
 
Mark SkrodzkiSenior Systems EngineerAuthor Commented:
HG...

Here is what I have after looking at some of your suggestions. One problem is, is that it doesn't create a new line just adds new fields to the end of the existing line. What is missing??

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
 
<!--#include file="Connections/WOT.asp" -->
 
 
<%
Dim rs1WO__MMColParam
rs1WO__MMColParam = "1"
If (Session("WOID") <> "") Then 
  rs1WO__MMColParam = Session("WOID")
End If
%>
<%
Dim rs1WO
Dim rs1WO_cmd
Dim rs1WO_numRows
 
Set rs1WO_cmd = Server.CreateObject ("ADODB.Command")
rs1WO_cmd.ActiveConnection = MM_WOT_STRING
rs1WO_cmd.CommandText = "SELECT ID, WONUM FROM wot.wo WHERE ID = ?" 
rs1WO_cmd.Prepared = true
rs1WO_cmd.Parameters.Append rs1WO_cmd.CreateParameter("param1", 5, 1, -1, rs1WO__MMColParam) ' adDouble
 
Set rs1WO = rs1WO_cmd.Execute
rs1WO_numRows = 0
%>
 
<SCRIPT LANGUAGE=javascript>
<!--
function clearFields(){
     var objForm = document.forms[0]
     for(i=0;i<objForm.elements.length;i++){
          if(objForm.elements[i].type=="text"){
               objForm.elements[i].value = "";
          }
          if(objForm.elements[i].type=="select-one"){
               objForm.elements[i].selectedIndex = 0;
          }
          if(objForm.elements[i].type=="checkbox"){
               objForm.elements[i].selected = false;
          }
          if(objForm.elements[i].type=="radio"){
               objForm.elements[i].selected = false;
          }
     }
}
//-->
</SCRIPT>
 
 
 
 
 
 
 
<% Response.Buffer = True %>
<%
Dim rs1__MMColParam
rs1__MMColParam = "1"
If (Request.QueryString("partnumid") <> "") Then 
  rs1__MMColParam = Request.QueryString("partnumid")
End If
%>
<%
Dim rs1
Dim rs1_cmd
Dim rs1_numRows
 
Set rs1_cmd = Server.CreateObject ("ADODB.Command")
rs1_cmd.ActiveConnection = MM_WOT_STRING
rs1_cmd.CommandText = "SELECT ID, partnum, partdesc, bin FROM wot.inv WHERE ID = ?" 
rs1_cmd.Prepared = true
rs1_cmd.Parameters.Append rs1_cmd.CreateParameter("param1", 5, 1, -1, rs1__MMColParam) ' adDouble
'response.write(rs1_cmd.CommandText)
Set rs1 = rs1_cmd.Execute
rs1_numRows = 0
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.style5 {
	font-size: 24px;
	color: #FF0000;
	font-weight: bold;
}
-->
</style>
</head>
 
<body>
 
<% 'response.write(Request.QueryString("partnumid"))
Dpartnumid=Request.QueryString("partnumid")
%>
<script>
var fldNum=0
function addRow(theButton){
  theTabBody=theButton.parentNode.parentNode.parentNode;
  oldRow=theButton.parentNode.parentNode;
  newRow=oldRow.cloneNode(false);
  //newRow.style.background='white';
  newCell=document.createElement('TD');
  newCell.innerHTML=document.getElementById('tplFrm').innerHTML.replace(/\#/g,++fldNum)
  newRow.appendChild(newCell);
  theTabBody.insertBefore(newRow,oldRow);
  newRow.swapNode(oldRow)
  alert(theTabBody.innerHTML) // comment this after test
}
function delRow(theButton){
  theButton.parentNode.parentNode.removeNode(true);
}
</script>
<div id=tplFrm style="display:none">
<input name="partnum#" type="text" id="partnum#" />
<input name="partdesc#" type="text" id="partdesc#" size="90" />
<input name="bin#" type="text" id="bin#" size="10" />
<input name="qty#" type="text" id="qty#" size="10" />
<input type="button" name="Submit#" value="Search" onClick="window.location='searchparts.asp'"/>
<input type=button value=Add onClick="addRow(this)">
<input type=button value=Del onClick="delRow(this)">
</div>
<form id="addparts" name="addparts" method="post" action="addparts_process2.asp">
  <table width="100%" border="0" cellspacing="0" cellpadding="1" bgcolor="#FFCC00">
    <tr bgcolor="#FFCC00">
      <th width="10%">Part Number </th>
      <th width="53%">Description</th>
      <th width="4%">Bin</th>
      <th width="6%">Quantity</th>
      <th width="13%">Search</th>
      <th width="14%">Add</th>
    </tr>
    <tr>
      <td><div align="center">
        <input name="partnum0" type="text" id="partnum0" />
      </div></td>
      <td>
        <div align="center">
          <input name="partdesc0" type="text" id="partdesc0" size="90" />
        </div></td>
 
      <td><div align="center">
        <input name="bin0" type="text" id="bin0" size="10" />
      </div></td>
      <td><div align="center">
        <input name="qty0" type="text" id="qty0" size="10" />
      </div></td>
 
      <td><div align="center"><input type="button" name="Submit0" value="Search" onClick="window.location='searchparts.asp'"/></div></td>
      <td><div align="center"><input type=button value=Add onClick="addRow(this)">
<input type=button value=Del onClick="delRow(this)"></div></td>
      <% 'End IF %>	  
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><div align="right">
        <input type="submit" name="Submit" value="Submit" />
        <input name="Reset" type="reset" id="Reset" value="Reset" />
      </div></td>
      <td>&nbsp;</td>
      <td><input name="wonum" type="hidden" id="wonum" value="<%=(rs1WO.Fields.Item("WONUM").Value)%>"/>
	  	  <input name="date" type="hidden" id="date" value="NOW()"/></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</form>
 
<p>&nbsp;</p>
<p>
  <input name="btnBack" type="button" onClick="window.location='partslist.asp?<%= "ID=" & Session("WOID") %>'" value="Back to Work Order"/>
  
</p>
</body>
</html>
<%
rs1WO.Close()
Set rs1WO = Nothing
%>
<%
rs1.Close()
Set rs1 = Nothing
%>

Open in new window

0
 
slamhoundCommented:
Can you post the generated HTML of after the Javascript has been excuted?

I'm guessing it's something as simple as adding a <br> somewhere.
0
 
Mark SkrodzkiSenior Systems EngineerAuthor Commented:
Here you go....

 
<SCRIPT LANGUAGE=javascript>
<!--
function clearFields(){
     var objForm = document.forms[0]
     for(i=0;i<objForm.elements.length;i++){
          if(objForm.elements[i].type=="text"){
               objForm.elements[i].value = "";
          }
          if(objForm.elements[i].type=="select-one"){
               objForm.elements[i].selectedIndex = 0;
          }
          if(objForm.elements[i].type=="checkbox"){
               objForm.elements[i].selected = false;
          }
          if(objForm.elements[i].type=="radio"){
               objForm.elements[i].selected = false;
          }
     }
}
//-->
</SCRIPT>
 
 
 
 
 
 
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.style5 {
	font-size: 24px;
	color: #FF0000;
	font-weight: bold;
}
-->
</style>
</head>
 
<body>
 
 
<script>
var fldNum=0
function addRow(theButton){
  theTabBody=theButton.parentNode.parentNode.parentNode;
  oldRow=theButton.parentNode.parentNode;
  newRow=oldRow.cloneNode(false);
  //newRow.style.background='white';
  newCell=document.createElement('TD');
  newCell.innerHTML=document.getElementById('tplFrm').innerHTML.replace(/\#/g,++fldNum)
  newRow.appendChild(newCell);
  theTabBody.insertBefore(newRow,oldRow);
  newRow.swapNode(oldRow)
  alert(theTabBody.innerHTML) // comment this after test
}
function delRow(theButton){
  theButton.parentNode.parentNode.removeNode(true);
}
</script>
<div id=tplFrm style="display:none">
<input name="partnum#" type="text" id="partnum#" >
<input name="partdesc#" type="text" id="partdesc#" size="90" >
<input name="bin#" type="text" id="bin#" size="10" >
<input name="qty#" type="text" id="qty#" size="10" >
<input type="button" name="Submit#" value="Search" onClick="window.location='searchparts.asp'">
<input type=button value=Add onClick="addRow(this)">
<input type=button value=Del onClick="delRow(this)">
</div>
<form id="addparts" name="addparts" method="post" action="addparts_process2.asp">
  <table width="100%" border="0" cellspacing="0" cellpadding="1" bgcolor="#FFCC00">
    <tr bgcolor="#FFCC00">
      <th width="10%">Part Number </th>
      <th width="53%">Description</th>
      <th width="4%">Bin</th>
      <th width="6%">Quantity</th>
      <th width="13%"></th>
      <th width="14%"></th>
    </tr>
    <tr>
      <td>
        <input name="partnum0" type="text" id="partnum0" />
      </td>
      <td>       
          <input name="partdesc0" type="text" id="partdesc0" size="90" />
        </td>
      <td>
        <input name="bin0" type="text" id="bin0" size="10" />
      </td>
      <td>
        <input name="qty0" type="text" id="qty0" size="10" />
      </td>
      <td><input type="button" name="Submit0" value="Search" onClick="window.location='searchparts.asp'"/>
	  </td>
      <td>
	  	<input type=button value=Add onClick="addRow(this)">
		<input type=button value=Del onClick="delRow(this)">
		</td>
      	  
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><div align="right">
        <input type="submit" name="Submit" value="Submit" />
        <input name="Reset" type="reset" id="Reset" value="Reset" />
      </div></td>
      <td>&nbsp;</td>
      <td><input name="wonum" type="hidden" id="wonum" value="1002"/>
	  	  <input name="date" type="hidden" id="date" value="NOW()"/></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</form>
 
<p>&nbsp;</p>
<p>
  <input name="btnBack" type="button" onClick="window.location='partslist.asp?ID=2'" value="Back to Work Order"/>
  
</p>
</body>
</html>

Open in new window

0
 
slamhoundCommented:
Your Javascript is getting beyond me but I'll try.

I'm not sure what you are exaclty referencing but if you are referencing just the field, then the cell information won't be included and will have to be added manually.

Adding a <TR> should give you a new line. Does the below work?
newCell=document.createElement('TR');
newCell=document.createElement('TD');

On the other hand, you can simply add the cell creating information manually:
newCell.innerHTML= '<tr><td>' + document.getElementById('tplFrm').innerHTML.replace(/\#/g,++fldNum) + '</td></tr>'
0
 
HonorGodSoftware EngineerCommented:
Some points to consider:
- When you clone a row, any id's that exists in the row being cloned will now be duplicated, which is a bad thing.

- On your <script> tag, remember to include the appropriate type attribute. For example:
<script type='text/javascript'>
  Otherwise, the wrong script processor may be invoked, and you will get unexpected results.

- In your addRow() function, are you certain that theTabBody is referencing the proper document element?
  If you want to guarantee that you are referencing the proper document element, I would suggest that you do something like:

  //------------------------------------------------------------------
  // Name: findeBody()
  // Role: Search up the tree, looking for "TBODY"
  // Note: If the beginning object is not within a TABLE,
  //      then the result will be null
  //------------------------------------------------------------------
  function findBody( obj ) {
    while ( obj && obj.nodeName != 'TBODY' ) {
      obj = obj.parentNode;
    }
    return obj;
  }

  Then, you could use it like:

  var theTabBody = findBody( theButton );
  if ( theTabBody ) {
    // Process the TBODY object...
  }

- When you delete a row, it is best to remove all of its child nodes first...
  Be careful though, you might have all sorts of child nodes.  For example,
  consider a nested table structure, i.e., a table within a table, within a table.
  If you want to be certain that you aren't just discarding things without
  care, then you might be causing a memory leak by just deleting a row, and
  its contents.

- When you say that "..it doesn't create a new line just adds new fields to the end of the existing line." Do you mean that new cells are being added to an existing row in the table?

0
 
Mark SkrodzkiSenior Systems EngineerAuthor Commented:
Here is the code I based my page script from. If you run it in a browser, you will see that when a new row gets created, al of the inputs are placed into the first column....that's is what my problem is. I need the new line to exactly look like the original and the only difference would be that the input names would have a new 'fldNum'. Please check out the code and you will see what I mean.

I cannot figure it out......

Thanks,
Mark
<html>
<head>
<script>
var fldNum=0
function addRow(theButton){
  theTabBody=theButton.parentNode.parentNode.parentNode;
  oldRow=theButton.parentNode.parentNode;
  newRow=oldRow.cloneNode(false);
  newRow.style.background='white';
  newCell=document.createElement('TD');
  newCell.innerHTML=document.getElementById('tplFrm').innerHTML.replace(/\#/g,++fldNum)
  newRow.appendChild(newCell);
  theTabBody.insertBefore(newRow,oldRow);
  newRow.swapNode(oldRow)
  alert(theTabBody.innerHTML) // comment this after test
}
function delRow(theButton){
  theButton.parentNode.parentNode.removeNode(true);
}
</script>
</head>
<body>
<div id=tplFrm style="display:none">
<input type=text name=input# size=50>
<select name=sel# onChange="this.parentNode.parentNode.style.background=options[selectedIndex].text">
<option>white
<option>red
<option>blue
<option>yellow
</select>
<input type=button value=Add onClick="addRow(this)">
<input type=button value=Del onClick="delRow(this)">
</div>
<form>
<table border=1>
<tr style="background-color:white"><td><input type=text name=input0 size=50></td><td> t e x t  
<select name=sel0 onChange="this.parentNode.parentNode.style.background=options[selectedIndex].text">
<option>white
<option>red
<option>blue
<option>yellow
</select>
</td>
<td>
<input type=button value=Add onClick="addRow(this)">
<input type=button value=Del onClick="delRow(this)">
</td></tr>
</table>
</form>
</body>
</html>

Open in new window

0
 
Mark SkrodzkiSenior Systems EngineerAuthor Commented:
Are there any new ideas for this issue??
0
 
HonorGodSoftware EngineerCommented:
For what else are you looking?
0
 
slamhoundCommented:
Still working on this but remove the swapNode line to see your output. Might help.
0
 
Mark SkrodzkiSenior Systems EngineerAuthor Commented:
Sorry for not responding.....I am working on a couple of other issues along with this one. I will be testing your latest code shortly. Thanks for the help so far.

Mark
0
 
Mark SkrodzkiSenior Systems EngineerAuthor Commented:
Sorry for not responding back to this question. My focus has gone in so many directions and I haven't been able to complete many of my current projects. They are still in progress but the higher priority items are being looked at first. Please proceed with the suggested closure to this question.

Mark S.
0
 
HonorGodSoftware EngineerCommented:
Thanks for the assist, and the points.

Good Luck & have a wonderful new year
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.