By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,401 Members | 1,381 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,401 IT Pros & Developers. It's quick & easy.

change the text box name

P: 67
I don't know how to change the text box name?

for ex:(my table like this)

sl. country from to
1 aaa (txt_c1) 5/4/09 (txt_f1) 5/13/09 (txt_t1) // Now i delete this row.
2 bbb (txt_c2) 5/18/09 (txt_f2) 5/25/09 (txt_t2)
3 ccc (txt_c3) 6/2/09 (txt_f3) 6/15/09 (txt_t3) // now i delete this row.
4 eee (txt_c4) 7/15/09 (txt_f4) 7/25/09 (txt_t4)

remainder rows, after delete.

1 bbb (txtc_2) 5/18/09 (txt_f2) 5/25/09 (txt_t2) // here i want to change the text box name automatically (txtc_1, txtf_1, txtt_1) how?
2 eee (txtc_4) 7/15/09 (txt_f4) 7/25/09 (txt_t4) // here i want to change the text box name automatically (txtc_2, txt_f2, txt_t2) how?

Expand|Select|Wrap|Line Numbers
  1. for(var k=i;k<lastRow-1;k++){  
  2.  
  3.  var aRow = document.getElementById('txt_C' + (k+1));  
  4. var FDate = document.getElementById('txt_F' + (k+1));  
  5. var TDate = document.getElementById('txt_T' + (k+1));  
  6.  
  7.     tbl.rows[k].cells[0].innerHTML = (k-1)+1;      // serial no  
  8.  
  9.     alert(aRow+'\t'+FDate+'\t'+TDate); 
  10.  
  11.                 // aRow.name = ('txt_C' + k); 
  12.      // FDate.name = ('txt_F' + k); 
  13.      // TDate.name = ('txt_T' + k); 
  14.  
  15.     //    tbl.rows[k].cells[1].childNodes[1]. 
  16. }  
  17.  
  18.  
the alert message is "[object HTMLInputElement] [object HTMLInputElement] [object HTMLInputElement] "



Thanks & Regards,
Susan.
May 8 '09 #1
Share this Question
Share on Google+
28 Replies


dmjpro
100+
P: 2,476
@shivasusan
Then why did you lie me?

Expand|Select|Wrap|Line Numbers
  1.  
  2. aRow.name = ('txt_C' + k); 
  3. FDate.name = ('txt_F' + k); 
  4. TDate.name = ('txt_T' + k); 
  5.  
  6.  
Are not these three lines not working?
May 8 '09 #2

P: 67
Yes.. i got error message.... aRow.name = ('txtc' + k) is null.
May 8 '09 #3

dmjpro
100+
P: 2,476
have a look this code....

Expand|Select|Wrap|Line Numbers
  1. function test(){
  2.  var text_box_ref = document.getElementById('text_box');
  3.  alert(document.getElementsByName('text_box')[0]); //before changing the name
  4.  text_box_ref.name = 'new_text_box';
  5.  alert(document.getElementsByName('text_box')[0]); //after changing the name
  6.  alert(document.getElementsByName('new_text_box')[0]);
  7. }
  8.  
Expand|Select|Wrap|Line Numbers
  1. <body onload="test()">
  2. <input type=text id="text_box" name="text_box" value="Debasis Jana"/>
  3. </body>
  4.  
Test it .... where i am changing the name then trying to access with old name.
May 8 '09 #4

acoder
Expert Mod 15k+
P: 16,027
Are you by any chance having problems with IE? IE does not allow you to set the name (at least not properly). There is a workaround though.
May 8 '09 #5

dmjpro
100+
P: 2,476
@acoder
Hey i didn't check with IE..just only tested in Mozilla ;)
But i think he didn't work with IE, see at his alerts .... "HTMLInputElement" ;)
May 8 '09 #6

P: 67
Hi

pls check my code is below:

Expand|Select|Wrap|Line Numbers
  1. for(var k=i;k<lastRow-1;k++){ 
  2.  
  3.  var aRow = document.getElementById('txtc' + k); 
  4. // var FDate = document.getElementById('txtf' + (k+1)); 
  5.  //var TDate = document.getElementById('txtt' + (k+1)); 
  6.  
  7.     tbl.rows[k].cells[0].innerHTML = (k-1)+1;     
  8.     alert(document.getElementByName('txtc' + k)[0]);  
  9.     aRow = "new_Name";
  10.     alert(document.getElementByName('txtc'+k)[0]);  
  11.     alert(document.getElementByName('new_Name')[0]); 
  12. }
  13.  
  14.  
i got error on this line "alert(document.getElementByName('txtc' + k)[0]); "

i thought my code is wrong.

Thanks & Regards,
Susan.
May 8 '09 #7

gits
Expert Mod 5K+
P: 5,390
there is no method called:

Expand|Select|Wrap|Line Numbers
  1. getElementByName()
it's:
Expand|Select|Wrap|Line Numbers
  1. getElementsByName()
kind regards
May 8 '09 #8

P: 67
Hi!

I was changed...."getElementsByName()", but I didn't got the answer. The alert message display "undefine"
Expand|Select|Wrap|Line Numbers
  1. getElementsByName() 
  2.  
  3.  
pls help me..

Thanks & Regards,
Susan.
May 11 '09 #9

gits
Expert Mod 5K+
P: 5,390
it will not work with IE ... since IE doesn't allow to change the name-attribute at runtime ... do you encounter this problem in IE?
May 11 '09 #10

acoder
Expert Mod 15k+
P: 16,027
You've set aRow (the object) to a string. What you meant to do was set its name:
Expand|Select|Wrap|Line Numbers
  1. aRow.name = "new_Name";
May 11 '09 #11

P: 67
Hi!

tbl.rows[k].cells[0].innerHTML ---- display the inner value of the text node.

by using this way, i want to get the text box value. how?

i try like this:
Expand|Select|Wrap|Line Numbers
  1. tbl.rows[k].cells[0].value
  2.  
  3.  
pls reply to me immed....

Thanks & Regards,
Susan.
May 12 '09 #12

dmjpro
100+
P: 2,476
Expand|Select|Wrap|Line Numbers
  1. alert(tbl.rows[k].cells[0].innerHTML.getElementsByTagName('input')[0].value);
  2. //check what does it say?
  3.  
May 12 '09 #13

Dormilich
Expert Mod 5K+
P: 8,639
wouldn't
Expand|Select|Wrap|Line Numbers
  1. alert(tbl.rows[k].cells[0].getElementsByTagName('input')[0].value);
  2.  
suffice?
May 12 '09 #14

P: 67
Hi!

yes.... i changed the the name for the text box.

now i got the error in validateRow(). how to solve?

delete row code:
Expand|Select|Wrap|Line Numbers
  1. for(var k=i;k<lastRow-1;k++){ 
  2.  
  3.  
  4.    tbl.rows[k].cells[0].innerHTML = (k-1)+1;      /// serial no.
  5. tbl.tBodies[0].rows[k].myRow.two.name = 'txtc'+ k; // input text country
  6.     tbl.tBodies[0].rows[k].myRow.three.name = 'txtf'+ k; // input text from date
  7.     tbl.tBodies[0].rows[k].myRow.four.name = 'txtt'+ k; // input text to date
  8.  

Expand|Select|Wrap|Line Numbers
  1. function validateRow(frm)
  2. {
  3.     var tbl = document.getElementById('tblSample');
  4.     var lastRow = tbl.rows.length - 1;
  5.     //alert (lastRow);
  6.     var i;
  7.     for (i=1; i<=lastRow; i++) {
  8.  
  9.     var aRow = document.getElementById('txt_C+i);  ---- i got error on this line
  10.     var FDate= document.getElementById('txt_F' + i).value;  ---- i got error on this line
  11.     var TDate = document.getElementById('txt_T' + i).value;  ---- i got error on this line
  12.  
  13.      if (aRow.value.length <= 0) {
  14.         alert('Row ' + i + ' is empty');
  15.         return;
  16.       }
  17.  
  18. if (FDate>TDate) {
  19.         alert("You have entered the date incorrectly on Row '" + i +"', please make the necessary amendments0.");
  20.         return;
  21.       }    
  22.     }
  23.  
error message is:
document.getElementById("txt_C" + i) is null
var aRow = document.getElementById('txt_C' + i).value;
pls reply to me immmm...
Thanks & Regards,
Susan.
May 12 '09 #15

Dormilich
Expert Mod 5K+
P: 8,639
what does the error say?
May 12 '09 #16

P: 67
Hi!

document.getElementById("txt_C" + i) is null
May 12 '09 #17

Dormilich
Expert Mod 5K+
P: 8,639
do you have that page available, so I can have a look myself?
May 12 '09 #18

P: 67
Hi!

Pls check my coding below:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <link href="../calCSS/CalendarControl[1].css" rel="stylesheet" type="text/css">
  4. <script src="../calJS/CalendarControl.js" type="text/javascript"> </script>
  5.  
  6. <script language="JavaScript" type="text/javascript">
  7.  
  8.  
  9. <!--
  10. // Last updated 2006-02-21
  11.  
  12. // CONFIG:
  13. // myRowObject is an object for storing information about the table rows
  14. function myRowObject(one, two, three, four)
  15. {
  16.     this.one = one; // text object
  17.     this.two = two; // input text object country
  18.     this.three = three;  // input text object From date
  19.     this.four = four;  // input text object To date
  20. }
  21.  
  22. function addRowToTable()
  23. {
  24.   var tbl = document.getElementById('tblSample');
  25.   var lastRow = tbl.rows.length;
  26.   // if there's no header row in the table, then iteration = lastRow + 1
  27.   var iteration = lastRow;
  28.   var row = tbl.insertRow(lastRow);
  29.  
  30.   // left cell
  31.   var cellLeft = row.insertCell(0);
  32.   var textNode = document.createTextNode(iteration);
  33.   cellLeft.appendChild(textNode);
  34.  
  35.   // right cell
  36.   var cellRight = row.insertCell(1);
  37.   var e1 = document.createElement('input');
  38.   e1.type = 'text';
  39.   e1.name = 'txtc' + iteration;
  40.   e1.id = 'txtc' + iteration;
  41.   e1.size = 40;
  42.  
  43.   e1.onkeypress = keyPressTest;
  44.   cellRight.appendChild(e1);
  45.  
  46.  
  47.     // text box cell
  48.   var textRight = row.insertCell(2);
  49.   var e2 = document.createElement('input');
  50.   e2.type = 'text';
  51.   e2.name = 'txtt' + iteration;
  52.   e2.id = 'txtt' + iteration;
  53.   e2.onfocus = function(event){return showCalendarControl(this);};
  54.   e2.size = 20;
  55.  
  56.   e2.onkeypress = keyPressTest;
  57.   textRight.appendChild(e2);
  58.  
  59.    // text box cell
  60.   var txtRight = row.insertCell(3);
  61.   var e3 = document.createElement('input');
  62.   e3.type = 'text';
  63.   e3.name = 'txtf' + iteration;
  64.   e3.id = 'txtf' + iteration;
  65.   e3.onfocus = function(event){return showCalendarControl(this);};
  66.   e3.size = 20;
  67.  
  68.   e3.onkeypress = keyPressTest;
  69.   txtRight.appendChild(e3);
  70.  
  71.       // Delete Button
  72.     var btnRight = row.insertCell(4);
  73.     var  e4 = document.createElement('input');
  74.     e4.type = 'button';
  75.     e4.name = 'btnDel' + iteration;
  76.     e4.id = 'btnDel' + iteration;
  77.     e4.value = 'Delete'
  78.     e4.onfocus = function(event){return removeRowFromTable(this);};
  79.  
  80.     e4.onkeypress = keyPressTest;
  81.     btnRight.appendChild(e4);
  82.  
  83.    row.myRow = new myRowObject(textNode, e1, e2, e3);
  84. }
  85. function keyPressTest(e, obj)
  86. {
  87.     var displayObj = document.getElementById('spanOutput');
  88.     var key;
  89.     if(window.event) {
  90.       key = window.event.keyCode; 
  91.     }
  92.     else if(e.which) {
  93.       key = e.which;
  94.     }
  95.     var objId;
  96.     if (obj != null) {
  97.       objId = obj.id;
  98.     } else {
  99.       objId = this.id;
  100.     }
  101.  
  102. }
  103.  
  104. function removeRowFromTable(r)
  105. {
  106.   var i=r.parentNode.parentNode.rowIndex;
  107.   var tbl = document.getElementById('tblSample');
  108.   var lastRow = tbl.rows.length;
  109. //alert(r.parentNode.nodeName); 
  110.  if (lastRow > 2 ) 
  111.   {
  112.   //alert("i"+i);
  113.   tbl.deleteRow(i);
  114.   }
  115.   else
  116.   {
  117.     alert("Please enter 'NIL' for country if your are not travelling");
  118.     return;
  119. }
  120.  
  121. for(var k=i;k<lastRow-1;k++){ 
  122.  
  123.  //var aRow = document.getElementById('txtc' + k); 
  124. // var FDate = document.getElementById('txtf' + (k+1)); 
  125.  //var TDate = document.getElementById('txtt' + (k+1)); 
  126.  
  127.     tbl.rows[k].cells[0].innerHTML = (k-1)+1;      
  128.     tbl.tBodies[0].rows[k].myRow.two.name = 'txtc'+ k; // input text country
  129.     tbl.tBodies[0].rows[k].myRow.three.name = 'txtf'+ k; // input text from date
  130.     tbl.tBodies[0].rows[k].myRow.four.name = 'txtt'+ k; // input text to date
  131.     //alert(aRow+'\t'+FDate+'\t'+TDate);
  132.      // ('txtc' + k) = aRow.name ;
  133.     //  FDate.name = ('txtf' + k);
  134.     //  TDate.name = ('txtt' + k);
  135.  
  136.     //  alert(aRow+'\t'+FDate+'\t'+TDate);
  137.         //var m = document.all.aRow.parentNode.id;
  138.     //alert(tbl.rows[k].cells[1].innerHTML.eventName[1]);
  139. //    alert(aRow);
  140.  
  141.    // var tbl = document.getElementById('tblSample');
  142.    // var lastRow = tbl.rows.length - 1;
  143.     //document.frm.txt_count.value = lastRow;
  144.  
  145.     //frm.action = "Remove_Data.asp";
  146.     //frm.submit();
  147. }
  148. /*function removeRowFromTable()
  149. {
  150.   var tbl = document.getElementById('tblSample');
  151.   var lastRow = tbl.rows.length;
  152.   if (lastRow > 2) tbl.deleteRow(lastRow - 1);
  153. }
  154. */
  155. function openInNewWindow(frm)
  156. {
  157.   // open a blank window
  158.   var aWindow = window.open('', 'TableAddRowNewWindow',
  159.    'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400');
  160.  
  161.   // set the target to the blank window
  162.   frm.target = 'TableAddRowNewWindow';
  163.  
  164.   // submit
  165.   frm.submit();
  166. }
  167. function validateRow(frm)
  168. {
  169.     var tbl = document.getElementById('tblSample');
  170.     var lastRow = tbl.rows.length - 1;
  171.     //alert (lastRow);
  172.     var i;
  173.     for (i=1; i<=lastRow; i++) {
  174.  
  175.     var aRow = document.getElementById('txt_C' + i); 
  176.     var FDate= document.getElementById('txt_F' + i).value;
  177.     var TDate = document.getElementById('txt_T' + i).value;
  178.  
  179.       if (aRow.value.length <= 0) {
  180.         alert('Row ' + i + ' is empty');
  181.         return;
  182.       }
  183.     }
  184.  
  185.   openInNewWindow(frm);
  186. }
  187. //-->
  188. </script>
  189. <style type="text/css">
  190. <!--
  191. .style3 {
  192.     font-size: 6px;
  193.     color: #FFFFFF;
  194. }
  195. -->
  196. </style>
  197. </head>
  198. <body>
  199. <h2>Try It</h2>
  200. <form action="tableaddrow_nw.html" name="frm" id="frm" method="get">
  201. <p>
  202. <input type="button" value="Add" onClick="addRowToTable();" />
  203. <input type="button" value="Remove" onClick="removeRowFromTable();" />
  204. <label>
  205. <input type="button" value="Submit" onClick="validateRow(this.form);" />
  206. </label>
  207. </p>
  208. <table width="606" border="1" cellpadding="3" cellspacing="2">
  209.   <tr>
  210.     <th width="286" rowspan="2">Country of Intended Travel</th>
  211.     <th colspan="2">Period of Stay</th>
  212.     </tr>
  213.   <tr>
  214.     <th width="153">From</th>
  215.     <th width="140">To</th>
  216.   </tr>
  217. </table>
  218. <table width="600" border="1" cellpadding="3" cellspacing="2" id="tblSample">
  219.   <tr>
  220.     <td colspan="5"><span class="style3">a</span></td>
  221.     </tr>
  222.  
  223.   <tr>
  224.     <td width="10">1</td>
  225.     <td width="240"><input type="text" name="txtc1"
  226.      id="txtc1" size="40" onKeyPress="keyPressTest(event, this);" /></td>
  227.  
  228.     <td width="147"><label>
  229.       <input type="text" name="txtt1" id="txtt1" onFocus="javascript:showCalendarControl(this);" />
  230.     </label></td>
  231.     <td width="151"><label>
  232.       <input type="text" name="txtf1" id="txtf1" onFocus="javascript:showCalendarControl(this);" />
  233.     </label></td>
  234.         <td width="27">
  235.   <input name="btnDel" id="btnDel1" type="button" value="Delete" onClick="javascript:removeRowFromTable(this);">
  236.   </td>
  237.  
  238.   </tr>
  239. </table>
  240. </form>
  241. </body>
  242. </html>
  243.  
html page
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>Table Add Row - new window</title>
  5. <script language="JavaScript">
  6. <!--
  7. function printToPage()
  8. {
  9.     var pos;
  10.     var searchStr = window.location.search;
  11.     var searchArray = searchStr.substring(1,searchStr.length).split('&');
  12.     var htmlOutput = '';
  13.     for (var i=0; i<searchArray.length; i++) {
  14.         htmlOutput += searchArray[i] + '<br />';
  15.     }
  16.     return(htmlOutput);
  17. }
  18. //-->
  19. </script>
  20. </head>
  21.  
  22. <body>
  23. <b>MREDKJ's Table Add Row</b>
  24. <br />
  25. Below should be the name/value pairs that were submitted:
  26. <p>
  27. <script language="JavaScript">
  28. <!--
  29. document.write(printToPage());
  30. //-->
  31. </script>
  32. </p>
  33. </body>
  34. </html>
  35.  
pls reply to me immediately.

Thanks & Regards,
Susan.
May 12 '09 #19

Dormilich
Expert Mod 5K+
P: 8,639
well, you forgot to change the names in validateRow() too (the new names are txtc1, …)
May 12 '09 #20

P: 67
now i changed the name, also i got the same error.

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


Thanks & Regards,
Susan
May 12 '09 #21

Dormilich
Expert Mod 5K+
P: 8,639
can't verify that. it's not giving this error when I tried it.
May 12 '09 #22

P: 67
document.getElementById("txtf" + i) is null
var FDate= document.getElementById('txtf' + i).value;
May 12 '09 #23

Dormilich
Expert Mod 5K+
P: 8,639
Expand|Select|Wrap|Line Numbers
  1. for (i=1; i<=lastRow; i++) {
  2.  
  3. var aRow = document.getElementById('txtc' + i);
  4. var FDate= document.getElementById('txtf' + i).value;
  5. var TDate = document.getElementById('txtt' + i).value;
  6.  
  7.  if (aRow.value.length <= 0) {
  8.   alert('Row ' + i + ' is empty');
  9.   return;
  10.  }
  11. }
doesn't give me any errors
May 12 '09 #24

P: 67
i got this error:

document.getElementById("txtf" + i) is null
var FDate= document.getElementById('txtf' + i).value;
May 12 '09 #25

Dormilich
Expert Mod 5K+
P: 8,639
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)
May 12 '09 #26

P: 67
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.tBodies[0].rows[i].myRow is undefined. var aRow = tbl.tBodies[0].rows[i].myRow.two.value.length; ")
below is my code:

Expand|Select|Wrap|Line Numbers
  1. function validateRow(frm)
  2. {
  3.     var tbl = document.getElementById('tblSample');
  4.     var lastRow = tbl.rows.length - 1;
  5.     //alert (lastRow);
  6.     var i;
  7.     for (i=1; i<=lastRow; i++) {
  8.       var aRow = tbl.tBodies[0].rows[i].myRow.two.value.length;
  9.       var FDate = tbl.tBodies[0].rows[i].myRow.three.value;
  10.       var TDate = tbl.tBodies[0].rows[i].myRow.four.value;
  11.       var country = tbl.tBodies[0].rows[i].myRow.two.value; 
  12.  
  13.          if (aRow <= 0) {
  14.         alert('Row ' + i + ' is empty');
  15.         return;
  16.       }
  17.  
  18.        if (FDate>TDate) {
  19.         alert("You have entered the date incorrectly on Row '" + i +"', please make the necessary amendments0.");
  20.         return;
  21.        }    
  22.  
  23.     }
  24.  
  25.   openInNewWindow(frm);
  26. }  
  27.  
pls reply to me immediately.....

Thanks & Regards,
Susan.
May 14 '09 #27

dmjpro
100+
P: 2,476
What is myRow?

Debasis Jana
May 14 '09 #28

Dormilich
Expert Mod 5K+
P: 8,639
what is the HTML for that, there seem to be some major changes made?
May 14 '09 #29

Post your reply

Sign in to post your reply or Sign up for a free account.