change the text box name

**Dormilich** · May 12 '09, 07:09 AM

what does the error say?

**shivasusan** · May 12 '09, 07:17 AM

Hi!

document.getEle mentById("txt_C " + i) is null

**Dormilich** · May 12 '09, 07:22 AM

do you have that page available, so I can have a look myself?

**shivasusan** · May 12 '09, 07:25 AM

Hi!

Pls check my coding below:

Code:

<html>
<head>
<link href="../calCSS/CalendarControl[1].css" rel="stylesheet" type="text/css">
<script src="../calJS/CalendarControl.js" type="text/javascript"> </script>

<script language="JavaScript" type="text/javascript">


<!--
// Last updated 2006-02-21

// CONFIG:
// myRowObject is an object for storing information about the table rows
function myRowObject(one, two, three, four)
{
	this.one = one; // text object
	this.two = two; // input text object country
	this.three = three;  // input text object From date
	this.four = four;  // input text object To date
}

function addRowToTable()
{
  var tbl = document.getElementById('tblSample');
  var lastRow = tbl.rows.length;
  // if there's no header row in the table, then iteration = lastRow + 1
  var iteration = lastRow;
  var row = tbl.insertRow(lastRow);
  
  // left cell
  var cellLeft = row.insertCell(0);
  var textNode = document.createTextNode(iteration);
  cellLeft.appendChild(textNode);
  
  // right cell
  var cellRight = row.insertCell(1);
  var e1 = document.createElement('input');
  e1.type = 'text';
  e1.name = 'txtc' + iteration;
  e1.id = 'txtc' + iteration;
  e1.size = 40;
  
  e1.onkeypress = keyPressTest;
  cellRight.appendChild(e1);
  
 
    // text box cell
  var textRight = row.insertCell(2);
  var e2 = document.createElement('input');
  e2.type = 'text';
  e2.name = 'txtt' + iteration;
  e2.id = 'txtt' + iteration;
  e2.onfocus = function(event){return showCalendarControl(this);};
  e2.size = 20;
  
  e2.onkeypress = keyPressTest;
  textRight.appendChild(e2);
  
   // text box cell
  var txtRight = row.insertCell(3);
  var e3 = document.createElement('input');
  e3.type = 'text';
  e3.name = 'txtf' + iteration;
  e3.id = 'txtf' + iteration;
  e3.onfocus = function(event){return showCalendarControl(this);};
  e3.size = 20;
  
  e3.onkeypress = keyPressTest;
  txtRight.appendChild(e3);

      // Delete Button
	var btnRight = row.insertCell(4);
	var  e4 = document.createElement('input');
	e4.type = 'button';
	e4.name = 'btnDel' + iteration;
	e4.id = 'btnDel' + iteration;
    e4.value = 'Delete'
    e4.onfocus = function(event){return removeRowFromTable(this);};
	
    e4.onkeypress = keyPressTest;
	btnRight.appendChild(e4);

   row.myRow = new myRowObject(textNode, e1, e2, e3);
}
function keyPressTest(e, obj)
{
    var displayObj = document.getElementById('spanOutput');
    var key;
    if(window.event) {
      key = window.event.keyCode; 
    }
    else if(e.which) {
      key = e.which;
    }
    var objId;
    if (obj != null) {
      objId = obj.id;
    } else {
      objId = this.id;
    }
  
}

function removeRowFromTable(r)
{
  var i=r.parentNode.parentNode.rowIndex;
  var tbl = document.getElementById('tblSample');
  var lastRow = tbl.rows.length;
//alert(r.parentNode.nodeName); 
 if (lastRow > 2 ) 
  {
  //alert("i"+i);
  tbl.deleteRow(i);
  }
  else
  {
    alert("Please enter 'NIL' for country if your are not travelling");
	return;
}

for(var k=i;k<lastRow-1;k++){ 

 //var aRow = document.getElementById('txtc' + k); 
// var FDate = document.getElementById('txtf' + (k+1)); 
 //var TDate = document.getElementById('txtt' + (k+1)); 

    tbl.rows[k].cells[0].innerHTML = (k-1)+1; 	 
	tbl.tBodies[0].rows[k].myRow.two.name = 'txtc'+ k; // input text country
	tbl.tBodies[0].rows[k].myRow.three.name = 'txtf'+ k; // input text from date
	tbl.tBodies[0].rows[k].myRow.four.name = 'txtt'+ k; // input text to date
	//alert(aRow+'\t'+FDate+'\t'+TDate);
	 // ('txtc' + k) = aRow.name ;
	//  FDate.name = ('txtf' + k);
	//  TDate.name = ('txtt' + k);
	  
	//  alert(aRow+'\t'+FDate+'\t'+TDate);
		//var m = document.all.aRow.parentNode.id;
	//alert(tbl.rows[k].cells[1].innerHTML.eventName[1]);
//	alert(aRow);
} 

   // var tbl = document.getElementById('tblSample');
   // var lastRow = tbl.rows.length - 1;
	//document.frm.txt_count.value = lastRow;
	
	//frm.action = "Remove_Data.asp";
	//frm.submit();
}
/*function removeRowFromTable()
{
  var tbl = document.getElementById('tblSample');
  var lastRow = tbl.rows.length;
  if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
*/
function openInNewWindow(frm)
{
  // open a blank window
  var aWindow = window.open('', 'TableAddRowNewWindow',
   'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400');
   
  // set the target to the blank window
  frm.target = 'TableAddRowNewWindow';
  
  // submit
  frm.submit();
}
function validateRow(frm)
{
    var tbl = document.getElementById('tblSample');
    var lastRow = tbl.rows.length - 1;
	//alert (lastRow);
    var i;
    for (i=1; i<=lastRow; i++) {
		
	var aRow = document.getElementById('txt_C' + i); 
	var FDate= document.getElementById('txt_F' + i).value;
	var TDate = document.getElementById('txt_T' + i).value;

      if (aRow.value.length <= 0) {
        alert('Row ' + i + ' is empty');
        return;
      }
    }
  
  openInNewWindow(frm);
}
//-->
</script>
<style type="text/css">
<!--
.style3 {
	font-size: 6px;
	color: #FFFFFF;
}
-->
</style>
</head>
<body>
<h2>Try It</h2>
<form action="tableaddrow_nw.html" name="frm" id="frm" method="get">
<p>
<input type="button" value="Add" onClick="addRowToTable();" />
<input type="button" value="Remove" onClick="removeRowFromTable();" />
<label>
<input type="button" value="Submit" onClick="validateRow(this.form);" />
</label>
</p>
<table width="606" border="1" cellpadding="3" cellspacing="2">
  <tr>
    <th width="286" rowspan="2">Country of Intended Travel</th>
    <th colspan="2">Period of Stay</th>
    </tr>
  <tr>
    <th width="153">From</th>
    <th width="140">To</th>
  </tr>
</table>
<table width="600" border="1" cellpadding="3" cellspacing="2" id="tblSample">
  <tr>
    <td colspan="5"><span class="style3">a</span></td>
    </tr>
  
  <tr>
    <td width="10">1</td>
    <td width="240"><input type="text" name="txtc1"
     id="txtc1" size="40" onKeyPress="keyPressTest(event, this);" /></td>
    
    <td width="147"><label>
      <input type="text" name="txtt1" id="txtt1" onFocus="javascript:showCalendarControl(this);" />
    </label></td>
    <td width="151"><label>
      <input type="text" name="txtf1" id="txtf1" onFocus="javascript:showCalendarControl(this);" />
    </label></td>
        <td width="27">
  <input name="btnDel" id="btnDel1" type="button" value="Delete" onClick="javascript:removeRowFromTable(this);">
  </td>

  </tr>
</table>
</form>
</body>
</html>

html page

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Table Add Row - new window</title>
<script language="JavaScript">
<!--
function printToPage()
{
	var pos;
	var searchStr = window.location.search;
	var searchArray = searchStr.substring(1,searchStr.length).split('&');
	var htmlOutput = '';
	for (var i=0; i<searchArray.length; i++) {
		htmlOutput += searchArray[i] + '<br />';
	}
	return(htmlOutput);
}
//-->
</script>
</head>

<body>
<b>MREDKJ's Table Add Row</b>
<br />
Below should be the name/value pairs that were submitted:
<p>
<script language="JavaScript">
<!--
document.write(printToPage());
//-->
</script>
</p>
</body>
</html>

pls reply to me immediately.

Thanks & Regards,
Susan.

**Dormilich** · May 12 '09, 07:29 AM

well, you forgot to change the names in validateRow() too (the new names are txtc1, …)

**shivasusan** · May 12 '09, 07:35 AM

now i changed the name, also i got the same error.

pls help me.... reply to me immed..

Thanks & Regards,
Susan

**Dormilich** · May 12 '09, 07:45 AM

can't verify that. it's not giving this error when I tried it.

**shivasusan** · May 12 '09, 07:51 AM

document.getEle mentById("txtf" + i) is null
var FDate= document.getEle mentById('txtf' + i).value;

**Dormilich** · May 12 '09, 07:54 AM

Code:

for (i=1; i<=lastRow; i++) {

var aRow = document.getElementById('txtc' + i);
var FDate= document.getElementById('txtf' + i).value;
var TDate = document.getElementById('txtt' + i).value;

 if (aRow.value.length <= 0) {
  alert('Row ' + i + ' is empty');
  return;
 }
}

doesn't give me any errors

**shivasusan** · May 12 '09, 08:04 AM

i got this error:

document.getEle mentById("txtf" + i) is null
var FDate= document.getEle mentById('txtf' + i).value;

**Dormilich** · May 12 '09, 08:22 AM

is this because of the string part (txtf) or the number part (i)? basicly check, that the variables you use (alert('txtf'+i)) are present in the document. sometimes it happens that you increment too much (i.e. you have 3 rows and test for a fourth)

**shivasusan** · May 14 '09, 01:26 AM

Hi!

How i can solve this problem? still i didn't get the answer. pls any one help me...

I try like this.... but i got error message, ("tbl.tBodie s[0].rows[i].myRow is undefined. var aRow = tbl.tBodies[0].rows[i].myRow.two.valu e.length; ")
below is my code:

Code:

function validateRow(frm)
{
    var tbl = document.getElementById('tblSample');
    var lastRow = tbl.rows.length - 1;
	//alert (lastRow);
    var i;
    for (i=1; i<=lastRow; i++) {
	  var aRow = tbl.tBodies[0].rows[i].myRow.two.value.length;
	  var FDate = tbl.tBodies[0].rows[i].myRow.three.value;
	  var TDate = tbl.tBodies[0].rows[i].myRow.four.value;
	  var country = tbl.tBodies[0].rows[i].myRow.two.value; 
	
         if (aRow <= 0) {
        alert('Row ' + i + ' is empty');
        return;
      }
	  
       if (FDate>TDate) {
        alert("You have entered the date incorrectly on Row '" + i +"', please make the necessary amendments0.");
        return;
       }	

    }
  
  openInNewWindow(frm);
}

pls reply to me immediately.... .

Thanks & Regards,
Susan.

**dmjpro** · May 14 '09, 05:22 AM

What is myRow?

Debasis Jana

**Dormilich** · May 14 '09, 05:37 AM

what is the HTML for that, there seem to be some major changes made?

change the text box name

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment