Solved

How to dynamically add new feilds to form

Posted on 2007-11-26
21
315 Views
Last Modified: 2008-12-31
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

0
Comment
Question by:Mark Skrodzki
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 7
  • 4
21 Comments
 
LVL 10

Expert Comment

by:slamhound
ID: 20354636
"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
 
LVL 1

Author Comment

by:Mark Skrodzki
ID: 20354852
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
 
LVL 10

Expert Comment

by:slamhound
ID: 20355415
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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
LVL 1

Author Comment

by:Mark Skrodzki
ID: 20355431
Could you explain what that code does? I am still a novice...
0
 
LVL 10

Expert Comment

by:slamhound
ID: 20355563
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
 
LVL 1

Author Comment

by:Mark Skrodzki
ID: 20358085
Would you have a working example of this code to understand the function better?
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 20358086
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
 
LVL 1

Author Comment

by:Mark Skrodzki
ID: 20496145
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
 
LVL 10

Expert Comment

by:slamhound
ID: 20496216
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
 
LVL 1

Author Comment

by:Mark Skrodzki
ID: 20496284
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
 
LVL 10

Expert Comment

by:slamhound
ID: 20496755
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
 
LVL 41

Assisted Solution

by:HonorGod
HonorGod earned 250 total points
ID: 20496855
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
 
LVL 1

Author Comment

by:Mark Skrodzki
ID: 20529593
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
 
LVL 1

Author Comment

by:Mark Skrodzki
ID: 20672557
Are there any new ideas for this issue??
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 20673034
For what else are you looking?
0
 
LVL 10

Expert Comment

by:slamhound
ID: 20677492
Still working on this but remove the swapNode line to see your output. Might help.
0
 
LVL 10

Accepted Solution

by:
slamhound earned 250 total points
ID: 20677612
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
 
LVL 1

Author Comment

by:Mark Skrodzki
ID: 21013798
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
 
LVL 1

Author Comment

by:Mark Skrodzki
ID: 23207864
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 23273476
Thanks for the assist, and the points.

Good Luck & have a wonderful new year
0

Featured Post

SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A publishing tool, a Version Control System, or a Collaboration Platform! These can be some of the defining words for the two very famous web-hosting Git repositories: Bitbucket and Github. Git is widely used amongst the programmers and developers f…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This video teaches users how to migrate an existing Wordpress website to a new domain.
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to selectively show certain fields based on user input using rules to gather relevant information and data from your forms. The rules feature provides you with an opportunity…

623 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question