View Full Version : Form field validation and defaulting select box

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


Product Location Shipping

TV Disable Default: Domestic
DVD Enable Default: Global

How can I do this?

Here is my code:


.borderTable {
border: 1 solid;
border-top-color: #CCCCCC;
border-left-color: #CCCCCC;
border-right-color: #CCCCCC;
border-bottom-color: #CCCCCC;
<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){
//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 = " ";

} else { return; }

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

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

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;

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

<div align="center"><input type="submit" value="submit"></div>

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){
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;
case "DVD":

06-23-2004, 01:24 AM

Thanks for your suggestion. I got it to work!

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum