Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Using focus() with dynamically created inputs

    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:
    Code:
     
    $(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:
    Code:
    <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>
    Last edited by predilezione; 11-15-2010 at 04:19 AM.

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Why don't you just pass this to the checkl() function?

    Code:
    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="";
    	}
    }

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    @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?

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Do you get any js error? Do you have the page posted online?

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,922
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Are you using Firefox?

    Try:-

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

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    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.

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

  • Users who have thanked glenngv for this post:

    predilezione (11-15-2010)

  • #7
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    @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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •