Solved

How to dynamically add new feilds to form

Posted on 2007-11-26
21
285 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
  • 9
  • 7
  • 4
21 Comments
 
LVL 10

Expert Comment

by:slamhound
Comment Utility
"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
Comment Utility
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
Comment Utility
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
 
LVL 1

Author Comment

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

Expert Comment

by:slamhound
Comment Utility
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
Comment Utility
Would you have a working example of this code to understand the function better?
0
 
LVL 41

Expert Comment

by:HonorGod
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 10

Expert Comment

by:slamhound
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Are there any new ideas for this issue??
0
 
LVL 41

Expert Comment

by:HonorGod
Comment Utility
For what else are you looking?
0
 
LVL 10

Expert Comment

by:slamhound
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Thanks for the assist, and the points.

Good Luck & have a wonderful new year
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

A Change in PHP Behavior with Session Write Short Circuit (http://php.net/manual/en/book.session.php#116217) (Winter 2014)** With the release of PHP 5.6 the session handler changed in a way that many think should be considered a bug.  See the note …
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
This video teaches viewers how to create their own website using cPanel and Wordpress. Tutorial walks users through how to set up their own domain name from tools like Domain Registrar, Hosting Account, and Wordpress. More specifically, the order in…
This video teaches users how to migrate an existing Wordpress website to a new domain.

744 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now