Solved

how to set the focus for text fied dynaically

Posted on 2008-10-21
9
347 Views
Last Modified: 2012-05-05
this code is working for  IE onky .
its not working in firefox and sarari..
Please help me on tis ....

var dd=1;
function addSite()
{
 
      alert(dd);
      var myTable = document.getElementById("myTable");
      var newTR = document.createElement("tr");
      var newName1 = document.createElement("td");
      var newName2 = document.createElement("td");
      var newName3 = document.createElement("td");
      var newName4 = document.createElement("td");
      var newName5 = document.createElement("td");
      var newName6 = document.createElement("td");
      var newName7 = document.createElement("td");
      var newName8 = document.createElement("td");
      var newName9 = document.createElement("td");
      var newName10 = document.createElement("td");
      var newName11 = document.createElement("td");
      
      newName1.innerHTML="<input type='text' name='fname"+dd+"' id ='fname"+dd+"' onBlur='abc(this);'>";
      alert("<input type='text' name='fname"+dd+"' id ='fname"+dd+"'>");
      newName2.innerHTML="<input type='text' name='mname"+dd+"' id ='mname"+dd+"' onBlur='def(this);'>";
      newName3.innerHTML="<input type='text' name='lanme' id ='lanme'  >";
      newName4.innerHTML="<input type='text' name='loginname'>";
      newName5.innerHTML="<input type='text' name='password'>";
      newName6.innerHTML="<input type='text' name='rpassword'>";
      newName7.innerHTML="<input type='text' name='ucategory'>";
      newName8.innerHTML="<input type='text' name='ghead'>";
      newName9.innerHTML="<input type='text' name='location'>";
      newName10.innerHTML="<input type='text' name='dept' >";
      newName11.innerHTML="<input type='text' name='mcount' />";
 
      newTR.appendChild(newName1);
      newTR.appendChild(newName2);
      newTR.appendChild(newName3);
      newTR.appendChild(newName4);
      newTR.appendChild(newName5);
      newTR.appendChild(newName6);
      newTR.appendChild(newName7);
      newTR.appendChild(newName8);
      newTR.appendChild(newName9);
      newTR.appendChild(newName10);
      newTR.appendChild(newName11);
      myTable.appendChild(newTR);
      dd++;
}
 function abc(field)
 {

       if(field.value=="")
      {

      var fieldname=field.id;
      var sfname=fieldname.substring(0,5);
      alert('Please Enter First Name ');
      fieldname.focus();
      
      return false;
                  
      }
 }


<form  name="newuser_frm" id="newuser_frm">
<table>
<tbody id='myTable'>
<tr>
<td>First Name</td> <td>Middle Name</td><td>Last Name</td><td>Login Name</td><td>Password</td><td>Re-type Password</td><td>User Category</td><td>Group Head</td><td>Location</td><td>Department</td><td>Max current chat windows</td>
</tr>
      <tr>
            
      <td><input type="text" name="fname" id="fname" onBlur="abc(this);"></td>
            <td><input type="text" name="mname" id="mname" onBlur="def(this);" ></td>
            <td><input type="text" name="lname" id="lname"  ></td>
            <td><input type="text" name="loginname" id="loginname" ></td>
            <td><input type="text" name="password" id="password"></td>
            <td><input type="text" name="rpassword" id="rpassword" ></td>
            <td><input type="text" name="ucategory" id="ucategory" ></td>
            <td><input type="text" name="ghead" id="ghead" >      </td>
            <td><input type="text" name="location" id="location" ></td>
            <td><input type='text' name="dept" id="dept" ></td>
            <td><input type="text"  name="mcount" id="mcount" /></td>
            <td><input type="button" value=" addRow " onClick="addSite()"></td>
      </tr>
 
</tbody>
</table>

<table align="center">
      <tr>
            <td>
                  <input type="submit" value=" Submit " onclick="validate()">
            </td>
      </tr>
</table>
</form>
</body>
</html>
0
Comment
Question by:telukuntla
  • 5
  • 4
9 Comments
 
LVL 15

Expert Comment

by:MMDeveloper
ID: 22766748
when you set focus, your script is only using the field ID such as

myTextBox_0.focus();

The field id is just a string so you're essentially doing

"my string".focus();

the focus() function is an object method so you need to use it against an object, in this case, a pointer to the textbox.

I'm assuming that the abc function is passed a field reference, if so, then just do

field.focus(); //(not fieldname.focus())
0
 

Author Comment

by:telukuntla
ID: 22767489
thanks for replying
its working for IE . but its not working in firefox and safari.
Please let me know the solution .
0
 
LVL 15

Expert Comment

by:MMDeveloper
ID: 22768317
is this page online where we can see it? If not, is there a way you can attach it to this page so I can work/test locally?
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 

Author Comment

by:telukuntla
ID: 22768664
Hi ,

 I am attaching  here as a html file.
This page conatains the fields like First Name , Middle Name and last name....
i nedd to check null . if it is null then need to show an alert with message and focus as to stay to the same field .
this is the functionality..
please help me on this...
i am getting lot of problems over there..
for IE , Fire Fox and sarari also...
thanks ..
0
 

Author Comment

by:telukuntla
ID: 22768693
fyi
<html>
<head>
<title>New User</title>
<script language="javascript">
 
var dd=1;
function addSite()
{
  
	alert(dd);
	var myTable = document.getElementById("myTable");
	var newTR = document.createElement("tr");
	var newName1 = document.createElement("td");
	var newName2 = document.createElement("td");
	var newName3 = document.createElement("td");
	var newName4 = document.createElement("td");
	var newName5 = document.createElement("td");
	var newName6 = document.createElement("td");
	var newName7 = document.createElement("td");
	var newName8 = document.createElement("td");
	var newName9 = document.createElement("td");
	var newName10 = document.createElement("td");
	var newName11 = document.createElement("td");
	
	newName1.innerHTML="<input type='text' name='fname"+dd+"' id ='fname"+dd+"' onBlur='abc(this);'>";
	alert("<input type='text' name='fname"+dd+"' id ='fname"+dd+"'>");
	newName2.innerHTML="<input type='text' name='mname"+dd+"' id ='mname"+dd+"' >";
	newName3.innerHTML="<input type='text' name='lanme' id ='lanme'  >";
	newName4.innerHTML="<input type='text' name='loginname'>";
	newName5.innerHTML="<input type='text' name='password'>";
	newName6.innerHTML="<input type='text' name='rpassword'>";
	newName7.innerHTML="<input type='text' name='ucategory'>";
	newName8.innerHTML="<input type='text' name='ghead'>";
	newName9.innerHTML="<input type='text' name='location'>";
	newName10.innerHTML="<input type='text' name='dept' >";
	newName11.innerHTML="<input type='text' name='mcount' />";
 
	newTR.appendChild(newName1);
	newTR.appendChild(newName2);
	newTR.appendChild(newName3);
	newTR.appendChild(newName4);
	newTR.appendChild(newName5);
	newTR.appendChild(newName6);
	newTR.appendChild(newName7);
	newTR.appendChild(newName8);
	newTR.appendChild(newName9);
	newTR.appendChild(newName10);
	newTR.appendChild(newName11);
	myTable.appendChild(newTR);
	dd++;
}
 function abc(ff,vv)
 {
 
 	if(ff.value=="")
	{
	vv.stopPropagation();
	var fieldname=ff.id;
	var sfname=fieldname.substring(0,5);
	alert('Please Enter First Name ');
		//alert(document.getElementById('fname'));
	//document.getElementById('fname').focus();
	ff.focus();
	//document.newuser_frm.fname.focus();
	//sfield.focus();
	//window.setTimeout("document.getElementById('"+ff.id+"').focus();",10);
	//window.setTimeout("document.getElementById('"+ff.id+"').select();",10);
	return false;
			
	}
 }
 function def(ff,vv)
 {
 
 	if(ff.value=="")
	{
	var fieldname=ff.id;
	var sfname=fieldname.substring(0,5);
	alert('Please Middle First Name ');
	//alert(document.getElementById('mname'));
	//document.getElementById('mname').focus();
	ff.focus();
	//document.newuser_frm.mname.focus();
//	field.focus();
	//window.setTimeout("document.getElementById('"+ff.id+"').focus();",10);
//	window.setTimeout("document.getElementById('"+ff.id+"').select();",10);
	return false;
			
	}
 }
 
 
</script>
</head>
<body>
 
<form  name="newuser_frm" id="newuser_frm">
<table>
<tbody id='myTable'>
<tr>
<td>First Name</td> <td>Middle Name</td><td>Last Name</td><td>Login Name</td><td>Password</td><td>Re-type Password</td><td>User Category</td><td>Group Head</td><td>Location</td><td>Department</td><td>Max current chat windows</td>
</tr>
	<tr>
		
      <td><input type="text" name="fname" id="fname" onBlur="abc(this,this.event);"></td>
		<td><input type="text" name="mname" id="mname"  onBlur="def(this,this.event);" ></td>
		<td><input type="text" name="lname" id="lname"  ></td>
		<td><input type="text" name="loginname" id="loginname" ></td>
		<td><input type="text" name="password" id="password"></td>
		<td><input type="text" name="rpassword" id="rpassword" ></td>
		<td><input type="text" name="ucategory" id="ucategory" ></td>
		<td><input type="text" name="ghead" id="ghead" >	</td>
		<td><input type="text" name="location" id="location" ></td>
		<td><input type='text' name="dept" id="dept" ></td>
		<td><input type="text"  name="mcount" id="mcount" /></td>
		<td><input type="button" value=" addRow " onClick="addSite()"></td>
	</tr>
 
</tbody>
</table>
 
<table align="center">
	<tr>
		<td>
			<input type="submit" value=" Submit " onclick="validate()">
		</td>
	</tr>
</table>
</form>
</body>
</html>

Open in new window

0
 
LVL 15

Expert Comment

by:MMDeveloper
ID: 22769398
ok right off the bat the submit button is trying to run a validate() function that doesn't exist in your pasted code. Was this function renamed or removed?
0
 
LVL 15

Expert Comment

by:MMDeveloper
ID: 22769803
this one works.
<html>
<head>
<title>New User</title>
<script language="javascript">
var isValidating = false;
var dd=1;
function addSite()
{
  
        alert(dd);
        var myTable = document.getElementById("myTable");
        var newTR = document.createElement("tr");
        var newName1 = document.createElement("td");
        var newName2 = document.createElement("td");
        var newName3 = document.createElement("td");
        var newName4 = document.createElement("td");
        var newName5 = document.createElement("td");
        var newName6 = document.createElement("td");
        var newName7 = document.createElement("td");
        var newName8 = document.createElement("td");
        var newName9 = document.createElement("td");
        var newName10 = document.createElement("td");
        var newName11 = document.createElement("td");
        
        newName1.innerHTML="<input type='text' name='fname"+dd+"' id ='fname"+dd+"' onBlur='abc(this);'>";
        alert("<input type='text' name='fname"+dd+"' id ='fname"+dd+"'>");
        newName2.innerHTML="<input type='text' name='mname"+dd+"' id ='mname"+dd+"' >";
        newName3.innerHTML="<input type='text' name='lanme' id ='lanme'  >";
        newName4.innerHTML="<input type='text' name='loginname'>";
        newName5.innerHTML="<input type='text' name='password'>";
        newName6.innerHTML="<input type='text' name='rpassword'>";
        newName7.innerHTML="<input type='text' name='ucategory'>";
        newName8.innerHTML="<input type='text' name='ghead'>";
        newName9.innerHTML="<input type='text' name='location'>";
        newName10.innerHTML="<input type='text' name='dept' >";
        newName11.innerHTML="<input type='text' name='mcount' />";
 
        newTR.appendChild(newName1);
        newTR.appendChild(newName2);
        newTR.appendChild(newName3);
        newTR.appendChild(newName4);
        newTR.appendChild(newName5);
        newTR.appendChild(newName6);
        newTR.appendChild(newName7);
        newTR.appendChild(newName8);
        newTR.appendChild(newName9);
        newTR.appendChild(newName10);
        newTR.appendChild(newName11);
        myTable.appendChild(newTR);
        dd++;
}
 
 function checkField(el, msg) {
 	if (el.value == "" && !isValidating) {
		isValidating = true;
		alert(msg);
		setTimeout(function() {el.focus(); isValidating = false;}, 10);
	} else {}
 }
 
 function setFocus(el) {
 	el.focus();
 } 
 
</script>
</head>
<body>
<form  name="newuser_frm" id="newuser_frm">
      <table>
            <tbody id='myTable'>
                  <tr>
                        <td>First Name</td>
                        <td>Middle Name</td>
                        <td>Last Name</td>
                        <td>Login Name</td>
                        <td>Password</td>
                        <td>Re-type Password</td>
                        <td>User Category</td>
                        <td>Group Head</td>
                        <td>Location</td>
                        <td>Department</td>
                        <td>Max current chat windows</td>
                  </tr>
                  <tr>
                        <td><input type="text" name="fname" id="fname" onblur="checkField(this, 'Please enter your first name');" /></td>
                        <td><input type="text" name="mname" id="mname" onblur="checkField(this, 'Please enter your middle name');" /></td>
                        <td><input type="text" name="lname" id="lname" /></td>
                        <td><input type="text" name="loginname" id="loginname" /></td>
                        <td><input type="text" name="password" id="password" /></td>
                        <td><input type="text" name="rpassword" id="rpassword" /></td>
                        <td><input type="text" name="ucategory" id="ucategory" /></td>
                        <td><input type="text" name="ghead" id="ghead" /></td>
                        <td><input type="text" name="location" id="location" /></td>
                        <td><input type='text' name="dept" id="dept" /></td>
                        <td><input type="text"  name="mcount" id="mcount" /></td>
                        <td><input type="button" value=" addRow " onClick="addSite()" /></td>
                  </tr>
            </tbody>
      </table>
      <table align="center">
            <tr>
                  <td><input type="submit" value=" Submit " onClick="validate()" />
                  </td>
            </tr>
      </table>
</form>
</body>
</html>

Open in new window

0
 

Author Comment

by:telukuntla
ID: 22773987
thanks for response,
its working fine for fire fox and safari..
but its not working in IE.
Pelase let me know the things what i have to do....

thansk for nice response...
0
 

Accepted Solution

by:
telukuntla earned 0 total points
ID: 22776316
please reply me .
i am wating for your reply
plz help me .......
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question