Form field validation and defaulting select box [Archive]

rima

06-18-2004, 01:58 AM

I have a table that can add rows dynamically by clicking the add button. Rows can be deleted by checking the row and clicking the delete button.
I need to do some validation to these records. Every record contains a dropdown called Product. Based on the product selected, I want to
enable/disable the Location field and also default a value in the Shipping field for that particular record

EG;

Product Location Shipping
_____________________________

TV Disable Default: Domestic
DVD Enable Default: Global

How can I do this?

Here is my code:

Thanks

<html>
<head>
<title>Untitled</title>
<style>
.borderTable {
border: 1 solid;
border-top-color: #CCCCCC;
border-left-color: #CCCCCC;
border-right-color: #CCCCCC;
border-bottom-color: #CCCCCC;
}
</style>
<script language="JavaScript" type="text/javascript">
var ie = document.all;
var dom = document.getElementById;
var tableLength;
var z;

var rowsArr = new Array()// **** Added to collect number of rows to delete
var ctr = 0;// **** Added to count number of rows to delete

function getTableLength(myTable){
if(dom) tableLength = document.getElementById(myTable).getElementsByTagName("TR").length;
return tableLength;
}

function addRow(id){
if(dom){
//numrows = document.all.myTable.rows.length;
var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];

var row = document.createElement("TR")
var td1 = document.createElement("TD")
td1.innerHTML = "<input type=checkbox align=center name='"+name+"' id='"+name+"' onclick=\"setRow(this);\">";
var td2 = document.createElement("TD")
td2.innerHTML = "<select size=1 name='prd' id='prd'><option>Select a product<option value='TV'>TV<option value='DVD'>DVD<option value='SPEAKERS'>SPEAKERS<option value='COMPUTERS'>COMPUTERS<option value='PRINTERS'>PRINTERS<option value='COPIERS'>COPIERS<option value='SCANNERS'>SCANNERS<option value='DIGITAL CAMERAS'>DIGITAL CAMERAS<option value='ROUTERS'>ROUTERS<option value='COMP PERIPHARALS'>COMP PERIPHARALS</select>";
var td3 = document.createElement("TD")
td3.innerHTML = "<input type=text align=center size=15 name='idLoc' id='idLoc'>";
var td4 = document.createElement("TD")
td4.innerHTML = "<select size=1 name='Loc' id='Loc'><option selected>Select a Location<option value=1>North East<option value=2>Soth America<option value=3>Canada</select>";
var td5 = document.createElement("TD")
td5.innerHTML = "<select size=1 name='"+name+"' id='"+name+"'><option selected>Select a Shipping<option value=1>Domestic<option value=2>Global</select>";
var td6 = document.createElement("TD")
td6.innerHTML = " ";
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
row.appendChild(td5);
row.appendChild(td6);
tbody.appendChild(row);

} else { return; }
}

function getRowNum(){
if(dom)
tdCtr = 0;
var z = document.getElementById('myTable').getElementsByTagName("TR");
var w = (z[z.length-1]);
tdCtr-=(w.getElementsByTagName("td").length);
w.removeNode(true)
return tdCtr;
}

function delRow(myTable){
for(var x=0;x<rowsArr.length;x++){
var row = rowsArr[x];
row.removeNode(true);

}
myTable.innerHTML = myTable.innerHTML;
}

/**** Function added to add rows to be deleted *****/
/*
@param obj checkbox field determining which row to be deleted
*/
function setRow(obj){
rowsArr[ctr++] = obj.parentNode.parentNode;
}
</script>

</head>
<body >
<br>
<table class="tblBorder4" height="96%" width="100%">
<tr>
<td valign="top">
<form name=test>
<br>
<table width="600" align="center" bgcolor="#efefef" class="borderTable" cellspacing="1"
cellpadding="1" id="myTable">
<tbody>
<tr class="sub-title" >
<td align="center">
<input type="button" value="Delete" onclick="delRow('myTable')">
</td>
<td >Product</td>
<td >ID Loc</td>
<td >Location</td>
<td>Shipping</td>
<td width="50" align="left">
<input type="button" value="Add" onclick="addRow('myTable')">

</td>
</tr>
</tbody>
</table>
<br>
<br>
<div align="center"><input type="submit" value="submit"></div>
</form>
</td>
</tr>
</table>
</body>
</html>

glenngv

06-18-2004, 04:58 AM

You can't have multiple elements with the same id unlike with the name attribute.

td3.innerHTML = "<input type=text align=center size=15 name='idLoc' id='idLoc'>";

You should name your fields with a convention like prd1, prd2, ... and loc1, loc2, ... and shp1, shp2, ... so that you can easily associate which fields belong to a product.

Let's say you have a running counter called "num", the product combobox would look like this:

var num=0; //running counter
function addRow(id){
if(dom){
num++;
...
td2.innerHTML = '<select size="1" name="prd'+num+'" onchange="setFields(this, '+num+')">...</select>';
//do the same thing with location and shipping fields
...

and the setFields function:

function setFields(objSel, suffix){
var oLoc = objSel.form.elements['loc'+suffix];
var oShip = objSel.form.elements['shp'+suffix];
switch (objSel.options[objSel.selectedIndex].value){
case "TV":
oLoc.disabled = true;
oShip.selectedIndex = 0;
break;
case "DVD":
//...
}
}