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

Can't check if text field exists using JS and DOM

P: 3
I have a page that dynamically adds rows to a table and the user can also delete any of the rows in no specific order. When the form is submitted I need to do some validation. I can't loop through it because the names may by out of sequence if the user deleted some lines, so I need to check whether that particular text field exists. For some reason I can't reference the newly created text fields. I tried referencing it by id and by name but I get an error saying that the text field has no properties.

This is the function that I check to see if a field exists
Expand|Select|Wrap|Line Numbers
  1. function chkExists(){
  3. var d = document.form1;
  4. var val = parseInt(d.f_maxmine.value);
  5. var ct;
  7. for (ct=1; ct <=val; ct++)
  8.     {
  10.     if (document.getElementById("f_MNAME"+ct) == null || document.getElementById("f_MNAME"+ct) == 'undefined')
  11.     {     
  12.        alert("DOES NOT EXIST" + document.getElementById("f_MNAME"+ct).value);
  13.     }else{
  14.      alert("EXISTS" + document.getElementById("f_MNAME"+ct).value);
  15.      }
  17.   }    
  19. }//end function
This is the function that adds the rows
Expand|Select|Wrap|Line Numbers
  1. function addRow(){        
  2. //add a row to the rows collection and get a reference to the newly added row
  4. var ct;
  5. var newRow;
  6. var oCell;
  8.     ct = document.form1.f_othcounter.value;  
  10.     newRow = document.getElementById("tblOthGrid").insertRow((parseInt(ct)-1));
  12.     oCell = newRow.insertCell(0);        
  13.         oCell.innerHTML = "&nbsp;&nbsp; <input type='hidden' name='f_OthLineNum"+ct+"' value='"+ct+"'><input type='text' name='f_MName"+ct+"'>";
  15.     oCell = newRow.insertCell(1);
  16.     oCell.innerHTML = "&nbsp;&nbsp; <input type='text' name='f_test"+ct+"'> &nbsp;&nbsp;<input type='button' value='Delete' onclick='setCounter(0,1); removeRow();'/>";            
  19. }// end function
this is the function that deletes a row
Expand|Select|Wrap|Line Numbers
  1. function removeRow(src){
  3. var oRow = src.parentNode.parentNode;    
  5.     /* src refers to the input button that was clicked.    
  6.     to get a reference to the containing tr tag element,
  7.     get the parent of the parent (in this case case tr tag)
  8.     */    
  10.     //once the row reference is obtained, delete it passing in its rowIndex
  11.       document.getElementById("tblOthGrid").deleteRow(oRow.rowIndex);    
  13. }//end function
Aug 2 '07 #1
Share this Question
Share on Google+
3 Replies

Expert Mod 5K+
P: 5,368
hi ...

welcome to TSDN ...

as far as i can see at a first look: you don't create an id for your elements during the add-operation but in your check you use document.getElementById() that relies on an id to find a document node ...

kind regards
Aug 3 '07 #2

P: 3
Thanks that was it!! It was working in IE because I guess it looks at the name property if the id properly is not assigned. Firefox looks exclusively for the id property. Thanks for taking a look and helping me out. I really appreciate it.
Aug 3 '07 #3

Expert Mod 5K+
P: 5,368
no problem, you are welcome ... and post to the forum in case you have any question ... we are glad to help you ... ;)

kind regards
Aug 3 '07 #4

Post your reply

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