...

View Full Version : Using focus() with dynamically created inputs



predilezione
11-14-2010, 08:08 PM
I'm having an issue adding focus() to an input that is dynamically created with jquery. I'm still learning, so I've mixed in traditional js with my jquery code because it's easier for me to understand. Anyhow document.getElementById(name).style.backgroundColor="#72A4D2"; successfully changed the background of the input ID, but document.getElementById(name).focus(); does nothing. I know that this is the correct code because if I hard code an input into the form (which you can see I've commented out below, such as
document.getElementById('password').focus(); it refocuses successfully on that input. Thus I'm stumped yet again.

Anyone know how to deal with this issue?

JS:


$(function() {

var i = $('input').size() + 1;

$('a.add').click(function() {

$('<p>Username ' + i + ': <input type="text" id="user' + i + '" name="user' + i + '" onblur="javascript:checkl(this.name, this.value);"></p>').animate({ opacity: "show" }, "slow").appendTo('#inputs');


i++;
});
});

function checkl(name, value){
var errors=new Array();
var x;
var msg = "There were some problems...\n";

if (value==="") {
errors['blank'] = "Field must not be blank";
}

for (x in errors)
{
msg += "\n"+errors[x];
}

if (!(x==undefined)){
alert(msg);
document.getElementById(name).style.backgroundColor="#72A4D2"; //works, changed input background successfully
document.getElementById(name).focus(); // does NOT work, no focus
// document.getElementById('password').focus(); // successfully refocuses on hard coded 'password' input
}else{
document.getElementById(name).style.backgroundColor="";
}
}


HTML:

<a href="#" class="add" id="1"><img src="add.png" width="24" height="24" alt="add" title="add input" /></a>
<form id="target" name="target" action="post.php" method="post" onsubmit="return validate(this);">
<div id="inputs">
<!-- dynamically created inputs here -->
</div>

<!-- Password: <input type="password" id="password" name="password" size="10"> -->
<input type="submit" value="Send">

</form>

glenngv
11-14-2010, 11:13 PM
Why don't you just pass this to the checkl() function?


onblur="checkl(this);"
...
function checkl(objField){
var errors=new Array();
var x;
var msg = "There were some problems...\n";

if (objField.value==="") {
errors['blank'] = "Field must not be blank";
}

for (x in errors)
{
msg += "\n"+errors[x];
}

if (!(x==undefined)){
alert(msg);
objField.style.backgroundColor="#72A4D2";
objField.focus();
}else{
objField.style.backgroundColor="";
}
}

predilezione
11-15-2010, 04:37 AM
@glenngv

Thanks for your reply. I tried your suggestion but got the same result as with document.getElementById(name).focus(); ; the background color changed successfully but no focus(). Problem persists.

Bummer.

Anybody else ever deal with this issue?

glenngv
11-15-2010, 05:33 AM
Do you get any js error? Do you have the page posted online?

Philip M
11-15-2010, 09:11 AM
Are you using Firefox?

Try:-



objField.style.backgroundColor="#72A4D2";
myfield = objField; // note myfield must be a global variable
setTimeout('myfield.focus(); myfield.select();', 25);

glenngv
11-15-2010, 09:38 AM
Philip is right, you have to set a delay for the focus to work as you are calling it onblur. But to avoid having a global variable, you can do this.



objField.style.backgroundColor="#72A4D2";
setTimeout("document.getElementById('" + objField.id + "').focus()", 10);

predilezione
11-15-2010, 09:56 AM
@glenngv, thank you SO much, that worked perfectly.

@Philip M, you are absolutely right, it was a firefox issue which I hadn't even thought of checking. IE and Chrome worked just fine, and then when I added glenngv's code firefox now works wonderfully. Thank you.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum