Shown below is the sample prototype code I am working on. In addition
to the problems already mentioned, there are also inconsistencies in
toggling the visibiliy of the "Insert", "Update", and "Delete"
buttons. (Things work correctly in Netscape 7.1 and not in Internet
Explorer 6.0. Note that the visibility settings on the SIDSelect and
PIDSelect selection items work correctly in BOTH browsers.)
Thanks for your help!
Dave Eland
(e-mail address removed)
<html>
<head>
<script LANGUAGE="JavaScript">
var needsubmit,editnum;
function LTrim(strValue)
{
var LTRIMrgExp = /^\s */;
return strValue.replace(LTRIMrgExp,'');
}
function RTrim(strValue)
{
var RTRIMrgExp = /\s *$/;
return strValue.replace(RTRIMrgExp,'');
}
function Trim(strValue)
{
return LTrim(RTrim(strValue));
}
function setstatus(item,value)
{
document.getElementById(item).setAttribute("STATUS",value);
}
function getstatus(item)
{
return(document.getElementById(item).getAttribute("STATUS"));
}
function setvisible(item)
{
var v;
if (getstatus(item) == "Show") v = "visible"; else v = "hidden";
document.getElementById(item).style.visibility = v;
}
function setallvisible()
{
setvisible("SIDSelect");
setvisible("PIDSelect");
setvisible("Insert");
setvisible("Update");
setvisible("Delete");
}
function hadchange(item)
{
setstatus("Insert","Show"); /**/
setstatus("Update","Show"); /**/
setstatus("Delete","Show"); /**/
setallvisible()
}
function addrow()
// add new blank row at end of table
{
var n,v,tbl,tblbody,tblrow,tbldata,item,textitem,rowlist;
tbl = document.getElementById("tbl2");
tblbody = tbl.getElementsByTagName("tbody").item(0);
rowlist = tbl.getElementsByTagName("tr");
n = rowlist.length;
tblrow = document.createElement("TR");
tbldata = document.createElement("TD");
item = document.createElement("INPUT");
item.setAttribute("type","HIDDEN");
item.setAttribute("name","PID");
item.setAttribute("value"," ");
tbldata.appendChild(item);
item = document.createElement("INPUT");
item.setAttribute("type","TEXT");
item.setAttribute("name","PNAME");
item.setAttribute("value"," ");
item.setAttribute("size",15);
item.setAttribute("readonly",true);
tbldata.appendChild(item);
tblrow.appendChild(tbldata);
tbldata = document.createElement("TD");
item = document.createElement("BUTTON");
v = 'doaction("Edit",' + n +')';
item.setAttribute("name","Edit");
item.setAttribute("onclick",v);
textitem = document.createTextNode("Edit");
item.appendChild(textitem);
tbldata.appendChild(item);
tblrow.appendChild(tbldata);
tblbody.appendChild(tblrow);
}
function delrow(rownum)
// delete row if not at end of list
{
var i,v,tbl,tblbody,rowlist,buttonlist;
tbl = document.getElementById("tbl2");
tblbody = tbl.getElementsByTagName("tbody").item(0);
rowlist = tbl.getElementsByTagName("tr");
if (rownum < rowlist.length - 1)
{
tblbody.removeChild(rowlist[rownum]);
buttonlist = document.getElementsByName("Edit");
for (i = 0; i < buttonlist.length; i++)
{
v = 'doaction("Edit",' + i + ')';
buttonlist.setAttribute("onClick",v);
}
}
}
function doaction(curaction,num)
{
var i;
var selecteditem,pid,pname,pidlist,pnamelist;
document.thisForm.ACTION.value = curaction;
if (curaction == "SetScreen")
{
needsubmit = true;
document.thisForm.submit();
}
if (curaction == "First")
{
needsubmit = true;
document.thisForm.submit();
}
if (curaction == "Prev")
{
needsubmit = true;
document.thisForm.submit();
}
if (curaction == "Next")
{
needsubmit = true;
document.thisForm.submit();
}
if (curaction == "Last")
{
needsubmit = true;
document.thisForm.submit();
}
if (curaction == "Jump")
{
var SIDSelect;
SIDSelect = document.getElementById("SIDSelect");
if (SIDSelect.style.visibility == "hidden")
setstatus("SIDSelect","Show");
else
setstatus("SIDSelect","Hide");
SIDSelect.selectedIndex = -1;
setallvisible();
needsubmit = false;
}
if (curaction == "Edit")
{
var PIDSelect;
editnum = num;
PIDSelect = document.getElementById("PIDSelect");
if (PIDSelect.style.visibility == "hidden")
setstatus("PIDSelect","Show");
else
setstatus("PIDSelect","Hide");
needsubmit = false;
PIDSelect.selectedIndex = -1;
setallvisible();
}
if (curaction == "SelectSID")
{
if (document.thisForm.SIDSelect.value == "Cancel")
{
needsubmit = false;
}
else
{
needsubmit = true;
document.thisForm.submit();
}
setstatus("SIDSelect","Hide");
setallvisible();
}
if (curaction == "SelectPID")
{
if (document.thisForm.PIDSelect.value != "Cancel")
{
selecteditem =
Trim(document.getElementById("PIDSelect").value);
i = selecteditem.indexOf(" ");
pid = Trim(selecteditem.substring(0,i));
pname = Trim(selecteditem.substring(i));
pidlist = document.getElementsByName("PID");
pidlist[editnum].value = pid;
pnamelist = document.getElementsByName("PNAME");
pnamelist[editnum].value = pname;
if (pid == "" && editnum < pidlist.length-1)
{
delrow(editnum);
}
if (pid != "" && editnum == pidlist.length-1)
{
addrow();
}
setstatus("Update","Show");
}
needsubmit = false;
setstatus("PIDSelect","Hide");
setallvisible();
}
if (curaction == "Insert")
{
needsubmit = true;
document.thisForm.submit();
}
if (curaction == "Update")
{
needsubmit = true;
document.thisForm.submit();
}
if (curaction == "Delete")
{
needsubmit = true;
document.thisForm.submit();
}
}
function wantsubmit()
{
return(needsubmit);
}
function initialize()
{
editnum = 0;
needsubmit = true;
setstatus("Insert","Hide");
setstatus("Update","Hide");
setstatus("Delete","Hide");
setallvisible();
}
</script>
<title>Suppliers info</title>
</head>
<body onLoad='initialize()'>
<FORM NAME=thisForm ACTION="showparm.cgi" METHOD="POST"
onSubmit='return wantsubmit()'>
<TABLE ID="tbl0" BORDER="1">
<TR>
<TD>
<SELECT NAME="SCREEN" onChange='doaction("SetScreen",0)'>
<OPTION SELECTED> Suppliers
<OPTION> Parts
</SELECT>
<INPUT TYPE="HIDDEN" NAME="ACTION" VALUE="UNKNOWN">
<BR><BR>
<BUTTON ID="First" STATUS="Show"
onClick='doaction("First",0)'>First</BUTTON>
<BUTTON ID="Prev" STATUS="Show"
onClick='doaction("Prev",0)'>Prev</BUTTON>
<BUTTON ID="Next" STATUS="Show"
onClick='doaction("Next",0)'>Next</BUTTON>
<BUTTON ID="Last" STATUS="Show"
onClick='doaction("Last",0)'>Last</BUTTON>
<BUTTON ID="Jump" STATUS="Show"
onClick='doaction("Jump",0)'>Jump</BUTTON>
<BR><BR> Supplier
<INPUT TYPE="HIDDEN" NAME="SID" VALUE="1">
<BR>
<TABLE ID="tbl1" BORDER="1">
<TR>
<TD>SNAME</TD>
<TD>
<INPUT TYPE="TEXT" NAME="SNAME" VALUE="Jones" SIZE=15
onChange='hadchange()'>
</TD>
</TR>
<TR>
<TD>CITY</TD>
<TD>
<INPUT TYPE="TEXT" NAME="CITY" VALUE="Tulsa" SIZE=15
onChange='hadchange()'>
</TD>
</TR>
</TABLE>
<BR> Parts
<BR>
<TABLE ID="tbl2" BORDER="1">
<TR>
<TD>
<INPUT TYPE="HIDDEN" NAME="PID" VALUE="1">
<INPUT TYPE="TEXT" NAME="PNAME" VALUE="Bolt" SIZE=15 READONLY=true>
</TD>
<TD>
<BUTTON NAME="Edit" onClick='doaction("Edit",0)'>Edit</BUTTON>
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE="HIDDEN" NAME="PID" VALUE="3">
<INPUT TYPE="TEXT" NAME="PNAME" VALUE="Washer" SIZE=15
READONLY=true>
</TD>
<TD>
<BUTTON NAME="Edit" onClick='doaction("Edit",1)'>Edit</BUTTON>
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE="HIDDEN" NAME="PID" VALUE="4">
<INPUT TYPE="TEXT" NAME="PNAME" VALUE="Screw" SIZE=15
READONLY=true>
</TD>
<TD>
<BUTTON NAME="Edit" onClick='doaction("Edit",2)'>Edit</BUTTON>
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE="HIDDEN" NAME="PID" VALUE=" ">
<INPUT TYPE="TEXT" NAME="PNAME" VALUE=" " SIZE=15 READONLY=true>
</TD>
<TD>
<BUTTON NAME="Edit" onClick='doaction("Edit",3)'>Edit</BUTTON>
</TD>
</TR>
</TABLE>
<BR>
<BUTTON ID="Insert" STATUS="Hide"
onClick='doaction("Insert",0)'>Insert</BUTTON>
<BUTTON ID="Update" STATUS="Hide"
onClick='doaction("Update",0)'>Update</BUTTON>
<BUTTON ID="Delete" STATUS="Hide"
onClick='doaction("Delete",0)'>Delete</BUTTON>
</TD>
<TD>
<SELECT ID="SIDSelect" NAME="SIDSelect" SIZE=20 STATUS="Hide"
onChange='doaction("SelectSID",0)'>
<OPTION VALUE="Cancel">Cancel</OPTION>
<OPTION VALUE="1 Jones">Jones</OPTION>
<OPTION VALUE="2 Parker">Parker</OPTION>
<OPTION VALUE="3 Baker">Baker</OPTION>
</SELECT>
<SELECT ID="PIDSelect" NAME="PIDSelect" SIZE=20 STATUS="Hide"
onChange='doaction("SelectPID",0)'>
<OPTION VALUE="Cancel">Cancel</OPTION>
<OPTION VALUE=" "> </OPTION>
<OPTION VALUE="1 Bolt">Bolt</OPTION>
<OPTION VALUE="2 Nut">Nut</OPTION>
<OPTION VALUE="3 Washer">Washer</OPTION>
<OPTION VALUE="4 Screw">Screw</OPTION>
</SELECT>
</TD>
</TR>
</TABLE>
</FORM>
<script language="javascript" src="showdom2.js"></script>
</body>
</html>