AJAX

Set the cursor focus on the dynamic text box created

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Mar 2009

Posts: 5

Reputation: kalpsen is an unknown quantity at this point

Solved Threads: 0

kalpsen

Offline

Newbie Poster

Set the cursor focus on the dynamic text box created

Mar 6th, 2009

Hi there,

I'm having a little trouble in 'Setting the cursor focus' on a text box, that I'm creating dynamically, when Clicked on a button (having the onccick attribute).

Detail:

I have this button

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<INPUT TYPE="button" name="add_ans" STYLE="background-color:#CCFF00;width:50;height:30;" VALUE="Add Answer" onclick="generateRow()">
<INPUT TYPE="button" name="add_ans" STYLE="background-color:#CCFF00;width:50;height:30;" VALUE="Add Answer" onclick="generateRow()">

And this generateRow() javascript function.

 Help with Code Tags 
 JavaScript Syntax (Toggle Plain Text) 
var answer_count = 0;
function generateRow() {
  answer_count++;
  var order = 'order'+answer_count;
  var answer_text = 'answer_text'+answer_count;
  var score = 'score'+answer_count;
  var d=document.getElementById("answer_header");
  d.innerHTML+="<table border=0 cellspacing=1 cellpadding=1 width=630><tr><td><input type='text' name='"+order+"' size='6' onfocus='this.blur();' value='0'></td><td><input type='text' name='"+answer_text+"' size='70'></td><td><input type='text' name='"+score+"' size='6' onfocus='this.blur();' value='0'></td></tr></table>";
}
var answer_count = 0;
function generateRow() {
  answer_count++;
  var order = 'order'+answer_count;
  var answer_text = 'answer_text'+answer_count;
  var score = 'score'+answer_count;
  var d=document.getElementById("answer_header");
  d.innerHTML+="<table border=0 cellspacing=1 cellpadding=1 width=630><tr><td><input type='text' name='"+order+"' size='6' onfocus='this.blur();' value='0'></td><td><input type='text' name='"+answer_text+"' size='70'></td><td><input type='text' name='"+score+"' size='6' onfocus='this.blur();' value='0'></td></tr></table>";
}

So everytime the button is clicked, I get 3 text boxes. First text box, and the last text box, I made them uneditable.

What I wanted to do was, setting the cursor focus in the second text box.

I tried putting,

 Help with Code Tags 
 JavaScript Syntax (Toggle Plain Text) 
  var txtBox=document.getElementById('answer_text'+answer_count);
	if (txtBox!=null ) txtBox.focus();
  var txtBox=document.getElementById('answer_text'+answer_count);
	if (txtBox!=null ) txtBox.focus();

inside the generateRow function, so as to grab the dynamic variable, and make that field to be focused (and therby setting the cursor there).

but this always comes up with the javascript error, saying its NULL.

Does anybody know a solution for this ? Please let me know if you have one.

Thanks
Kalpsen

Last edited by peter_budo; Mar 6th, 2009 at 8:42 am. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks) and [icode] (inline code) tags.

•

Join Date: Mar 2009

Posts: 5

Reputation: kalpsen is an unknown quantity at this point

Solved Threads: 0

kalpsen

Offline

Newbie Poster

Re: Set the cursor focus on the dynamic text box created

Mar 9th, 2009

Looks like, it's tougher than I thought ?.... I see, no replies yet !!...

Last edited by kalpsen; Mar 9th, 2009 at 5:29 pm.

•

Join Date: Mar 2009

Posts: 5

Reputation: kalpsen is an unknown quantity at this point

Solved Threads: 0

kalpsen

Offline

Newbie Poster

Re: Set the cursor focus on the dynamic text box created

Mar 18th, 2009

No luck yet !!

•

Join Date: Mar 2009

Posts: 1

Reputation: dombenoit is an unknown quantity at this point

Solved Threads: 0

dombenoit

Offline

Newbie Poster

Re: Set the cursor focus on the dynamic text box created

Mar 19th, 2009

Hi there,

All you need to do is give your second input an ID, and then set focus to that element, see line #9.

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
var answer_count = 0;
function generateRow() {
	answer_count++;
	var order = 'order'+answer_count;
	var answer_text = 'answer_text'+answer_count;
	var score = 'score'+answer_count;
	var d=document.getElementById("answer_header");
	d.innerHTML+="<table border=0 cellspacing=1 cellpadding=1 width=630><tr><td><input type='text' name='"+order+"' size='6' onfocus='this.blur();' value='0'></td><td><input type='text' name='"+answer_text+"' id='"+answer_text+"' size='70'></td><td><input type='text' name='"+score+"' size='6' onfocus='this.blur();' value='0'></td></tr></table>";
	document.getElementById(answer_text).focus();
}
var answer_count = 0;
function generateRow() {
	answer_count++;
	var order = 'order'+answer_count;
	var answer_text = 'answer_text'+answer_count;
	var score = 'score'+answer_count;
	var d=document.getElementById("answer_header");
	d.innerHTML+="<table border=0 cellspacing=1 cellpadding=1 width=630><tr><td><input type='text' name='"+order+"' size='6' onfocus='this.blur();' value='0'></td><td><input type='text' name='"+answer_text+"' id='"+answer_text+"' size='70'></td><td><input type='text' name='"+score+"' size='6' onfocus='this.blur();' value='0'></td></tr></table>";
	document.getElementById(answer_text).focus();
}