File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
The moose likes HTML, CSS and JavaScript and the fly likes dynamic table creation problem calling onchange Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login

Win a copy of REST with Spring (video course) this week in the Spring forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "dynamic table creation problem calling onchange" Watch "dynamic table creation problem calling onchange" New topic

dynamic table creation problem calling onchange

prajapatisagar Sagar
Ranch Hand

Joined: Feb 28, 2011
Posts: 35
<%@page contentType="text/html; charset=iso-8859-1" language="java" import="java.sql.*,java.util.*" errorPage="" %>
<%@ page import="*" %>
<%@ page import="*"%>
<%@ page import="*" %>
<jsp:include page="../include/invSessionManager.jsp" />
Utilities util=new Utilities();
String msg="";
Branch br=new Branch();
String fiscalYr = br.getFiscalYr();
String reqId = br.getMaxReqId();
java.util.Iterator itemList=br.getItem().iterator();
<link href="../css/style.css" rel="stylesheet" type="text/css">
<link href="../css/table_style.css" rel="stylesheet" type="text/css">
<link href="../css/menu.css" type="text/css" media="screen" rel="stylesheet">
<script type="text/javascript">if (!window.qmad){qmad=new Object();qmad.binit="";qmad.bvis="";qmad.bhide="";}</script>
<script type="text/JavaScript" src="../js/menu.js"> </script>

<script language="javascript" src="../js/cal2.js"></script>
<script language="javascript" src="../js/cal_conf2.js"></script>
<script language="javascript" src="../js/getEmpNameByEmail_ajax.js"></script>
<script language="JavaScript">
function dates(){
var date = new Date();
var d = date.getDate();
var day = (d < 10) ? '0' + d : d;
var m = date.getMonth() + 1;
var month = (m < 10) ? '0' + m : m;
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;
document.f1.reqDt.value=year + "-" + month + "-" + day;
<script language="JavaScript" type="text/JavaScript">
function callLov(theURL,height,width){,'LOV','scrollbars=yes,resizable=no,width='+width+',height='+height)
<script language="JavaScript" type="text/JavaScript">
function check(val,name){
alert("checking value");
if (val=='' || val==0 || val<0){
alert('Enter the Qty, it must be greater than 0');


function checkform(){
var msg="";
var foo="";
var sum="The following errors occurred,\n";
var myform;
myform= document.f1;
if( document.f1.reqDt.value=="") {
msg=msg+" - Missing Requisition Date\n";
if( document.f1.empEmail.value=="") {
msg=msg+" - Missing Approving Email\n";
if( document.f1.empName.value=="") {
msg=msg+" - Missing Approving Name\n";

return false;

<script type="text/javascript">
// these array values correspond to the current status of their checkboxes
var itemDtl = new Array();
itemDtl["itemCd"] = true;
itemDtl["itemDesc"] = true;
itemDtl["qty"] = true;
itemDtl["ch"] = false;

document.getElementsByClassName = function(class_name) {
var docList = this.all || this.getElementsByTagName("*");
var matchArray = new Array();

// create a regular expression object for class
var re1 = new RegExp("\\b"+class_name+"\\b");

// create regular expression to handle dashes in class name
var re2 = new RegExp("[\S]"+class_name+"|"+class_name+"[\S]");

for (var i = 0; i < docList.length; i++) {
if (re1.test(docList[i].className) && !re2.test(docList[i].className) ) {
matchArray[matchArray.length] = docList[i];
return matchArray;

// add/remove table column for specified language
function dyn_table_change_itemm(itemm) {
var cb = document.getElementById("cb"+itemm);

itemDtl[itemm] = cb.checked;

// make sure at least one checkbox is checked
if (!cb.checked) {
var num_checked = 0;
for (var key in itemDtl) {
if (itemDtl[key]) {

if (num_checked == 0) {
itemDtl[itemm] = true;
cb.checked = true;
alert("You must keep at least one language enabled.");

var cells = document.getElementsByClassName(itemm);
for (var i=0; i<cells.length; i++) {
cells[i].style.display = cb.checked ? "block" : "none";
// hide all table cells that are part of a disabled language/column
function dyn_table_hide_itemDtl() {
for (var itemm in itemDtl) {
if (!itemDtl[itemm]) {
var cells = document.getElementsByClassName(itemm);
for (var i=0; i<cells.length; i++) {
cells[i].style.display = "none";

// add a new table row
function dyn_table_add_category() {
var tbody = document.getElementById("dyn_table_categories");
// count up all the existing categories on the screen so that new rows category id can be determined
var category_id = 1;
while (true) {
var row = document.getElementById("category"+category_id);
if (!row) {

var tr = document.createElement("tr");
tr.setAttribute("id", "category"+category_id);

var td_label = document.createElement("td");
td_label.appendChild(document.createTextNode("Item "+category_id+" Name:"));
td_label.setAttribute("class", "left");
td_label.setAttribute("className", "left");

var td_itemCd = document.createElement("td");
td_itemCd.setAttribute("class", "itemCd");
td_itemCd.setAttribute("className", "itemCd");

var td_itemDesc= document.createElement("td");
td_itemDesc.setAttribute("class", "itemDesc");
td_itemDesc.setAttribute("className", "itemDesc");

var td_unitDesc= document.createElement("td");
td_unitDesc.setAttribute("class", "unitDesc");
td_unitDesc.setAttribute("className", "unitDesc");

var td_qty = document.createElement("td");
td_qty.setAttribute("class", "qty");
td_qty.setAttribute("className", "qty");

var td_ch = document.createElement("td");
td_ch.setAttribute("class", "ch");
td_ch.setAttribute("className", "ch");

var td_del_link = document.createElement("td");

var a_del_link = document.createElement("a");

a_del_link.setAttribute("id", "del_category"+category_id);
a_del_link.setAttribute("href", "javascript:dyn_table_del_category("+category_id+")");
a_del_link.appendChild(document.createTextNode("Delete Item "+category_id));

var input_itemCd = document.createElement("input");
input_itemCd.setAttribute("type", "text");
input_itemCd.setAttribute("name", "itemCd"+category_id);
input_itemCd.setAttribute("id", "itemCd"+category_id);
// input_itemCd.setAttribute("onDblClick","javascript:callLov('../lov/lovItemDetails.jsp?id="+category_id+"','300','316')");

var input_itemDesc= document.createElement("input");
input_itemDesc.setAttribute("type", "text");
input_itemDesc.setAttribute("name", "itemDesc"+category_id);
input_itemDesc.setAttribute("id", "itemDesc"+category_id);
input_itemDesc.setAttribute("size", "40");

var input_qty= document.createElement("input");
input_qty.setAttribute("type", "text");
input_qty.setAttribute("name", "qty"+category_id);
input_qty.setAttribute("id", "qty"+category_id);

var input_unitDesc= document.createElement("input");
input_unitDesc.setAttribute("type", "text");
input_unitDesc.setAttribute("name", "unitDesc"+category_id);
input_unitDesc.setAttribute("id", "unitDesc"+category_id);

var input_ch= document.createElement("input");
input_ch.setAttribute("type", "hidden");
input_ch.setAttribute("name", "ch"+category_id);
input_ch.setAttribute("id", "ch"+category_id);
input_ch.setAttribute("value", category_id);



// remove specified category/row
function dyn_table_del_category(category_id) {
var tr = document.getElementById("category"+category_id);
if (!tr) {

// must decrement category_id value of all subsequent rows
while (true) {
var new_category_id = category_id - 1;
tr = document.getElementById("category"+category_id);

if (!tr) {
var children = tr.childNodes;
tr.setAttribute("id", "category"+new_category_id);

// I tried avoiding 'innerHTML', but that didn't help

//children[0].innerHTML = "";
children[0].appendChild(document.createTextNode("Item "+new_category_id+" Name:"));
children[1].childNodes[0].setAttribute("name", "itemCd"+new_category_id);
children[1].childNodes[0].setAttribute("id", "itemCd"+new_category_id);
children[2].childNodes[0].setAttribute("name", "itemDesc"+new_category_id);
children[2].childNodes[0].setAttribute("id", "itemDesc"+new_category_id);
children[3].childNodes[0].setAttribute("name", "qty"+new_category_id);
children[3].childNodes[0].setAttribute("id", "qty"+new_category_id);
children[4].childNodes[0].setAttribute("name", "unitDesc"+new_category_id);
children[4].childNodes[0].setAttribute("id", "unitDesc"+new_category_id);
children[5].childNodes[0].setAttribute("name", "ch"+new_category_id);
children[5].childNodes[0].setAttribute("id", "ch"+new_category_id);
children[6].childNodes[0].setAttribute("id", "del_category"+new_category_id);
children[6].childNodes[0].setAttribute("href", "javascript:dyn_table_del_category("+new_category_id+")");

var a_del_link = document.createElement("a");
a_del_link.setAttribute("id", "del_category"+new_category_id);
a_del_link.setAttribute("href", "javascript:dyn_table_del_category("+new_category_id+")");
a_del_link.appendChild(document.createTextNode("Delete Item "+new_category_id));

//children[4].childNodes[0].innerHTML = "";
<body onLoad="dates();document.f1.empEmail.focus();">
<jsp:include page="../include/header.jsp" />
<div class="clear">
<jsp:include page="../include/isInvMenu.jsp" />
<script type="text/javascript">

<div id="content">
<% if (msg != null){out.println(msg);}%>
<div class="title">Add Requisition Details</div>
<div class="contentbox">
<form name="f1" action="doAddRequisition.jsp" method="post" onSubmit="return checkform();">
<TABLE border="0" cellpadding="4" width="100%">
<td width="40"> </td>
<td width="103" > </td>
<td colspan="3" > </td>
<td> </td>
<td >Fiscal year</td>
<td ><input name="fiscalYear" type="text" value=<%=fiscalYr%> maxlength="64" readonly></td>
<td width="80" >Branch/Department </td>
<td width="465" colspan="2">
<input name="deptCd" type="hidden" value="<%=session.getAttribute("curDeptCd").toString()%>" maxlength="64" readonly size="40">
<input name="deptDesc" type="text" value="<%=util.getDesc("department_desc","department","department_cd",session.getAttribute("curDeptCd").toString())%>" maxlength="64" readonly size="40">
<td> </td>
<td>Requisition Date </td>
<td width="170"><input name="reqDt" type="text" maxlength="10" size="20" >
 <a href="javascript:showCal('Calendar3')"><img src="../../hrm/images/calendar.gif" width="11" height="13" border="0"></a> </td>
<td colspan="2"> </td>

<td> </td>
<td>Approving Email</td>
<td ><input name="empEmail" type="text" size="35" onChange="getEmpNameByEmail(this.value);" maxlength="50"></td>
<td colspan="3" ><input name="empName" type="text" class="input-nobox" readonly size="35" maxlength="50">
<input name="empCd" type="hidden"></td>
<td> </td>
<td colspan="4"><input name="remarks" type="text" value="" maxlength="100" size="60"></td>
<td> </td>
<td > </td>
<td colspan="3" > </td>
<table width="100%" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#000000">
<tr bgcolor="#ECE9D8">
<div id="dyn_table" class="channel_fields">
<div class="box dark">
<table width="100%" border="0" cellpadding="2" cellspacing="2" bgcolor="#ECE9D8">
<!-- IE7 requires the tbody tag when appending/removing children with JS -->
<tbody id="dyn_table_categories">
<Td width="174"><div class="left"><a href="javascript:dyn_table_add_category()">Add New Item</a></div></Td>
<td width="126" class="left"></td>
<td class="left"> </td>
<td width="126" class="itemCd"><strong>Item Code</strong></td>
<td width="212" class="itemDesc"><strong>Item Description</strong></td>
<td width="169" class="qty"><strong>Quantity</strong></td>
<td width="169" class="qty"><strong>Unit</strong></td>
<tr id="category1">
<td class="left">Item 1 Name:</td>
<td ><input type="text" name="itemCd1" id="itemCd1" onDblClick="callLov('../lov/lovItemDetails.jsp?id=1','300','316')" readonly="" /></td>
<td ><input type="text" name="itemDesc1" id="itemDesc1" readonly="" size="40" class="input-nobox"/></td>
<td ><input type="text" name="qty1" id="qty1" onChange="check(this.value,;"/></td>
<td ><input type="text" name="unitDesc1" id="unitDesc1"/></td>
<td width="231"><input name="ch1" type="hidden" value="1"></td>

<TABLE align="left" width="100%">
<TD><input type="submit" name="Submit" value="Submit" /></TD>
<td><jsp:include page="../include/footer.html"/></td>

Above is the code which creates a dyanamic table and in dyanamic table's column i want to call a java script function which determines whether the input box contains numeric values of not,i used a java script function"check()" to determine whether the field is numeric or not.The problem i am facing is the java script function is called when ever the dyanamic table creating link is clicked it class the numeric checking function not when the field changes its values. please help
Eric Pascarello

Joined: Nov 08, 2001
Posts: 15385
Use code tags!

document.all is 1998 programming and is IE only. Do not use it

this.value is a string and you are treating it has a number.

prajapatisagar Sagar
Ranch Hand

Joined: Feb 28, 2011
Posts: 35
Eric Pascarello wrote:Use code tags!

document.all is 1998 programming and is IE only. Do not use it

this.value is a string and you are treating it has a number.


Thanks for reply to my post the prblm is solved by calling function in place of setting the set attribute.
I agree. Here's the link:
subject: dynamic table creation problem calling onchange
It's not a secret anymore!