www.webdeveloper.com
Results 1 to 3 of 3

Thread: Help using focus() with dynamically created inputs

Hybrid View

  1. #1
    Join Date
    Nov 2010
    Posts
    2

    Help 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 changes 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.

    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>

  2. #2
    Join Date
    Aug 2010
    Location
    Baltimore, Maryland, United States
    Posts
    138
    Use onchange instead of onblur.
    How much of human life is lost in waiting?

  3. #3
    Join Date
    Nov 2010
    Posts
    2
    @Ofekmeister, onchange made no difference.

    Apparently it was only a firefox issue, as IE & Chrome rendered correctly. Someone helped me out in another post and so if anyone else finds themselved with this firefox issue, it works when replacing

    Code:
    document.getElementById(name).focus(); // does NOT work, no focus
    with

    Code:
    setTimeout("document.getElementById('" + objField.id + "').focus()", 10); // works great in all browsers
    added objField to the onblur and function as so
    Code:
    function checkl(name, value, objField){
    ...
    Code:
    onblur="javascript:checkl(this.name, this.value, this);"
    It makes using this.name and this.value redundant but I'll just take those out later. Thanks for your help.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles