7

Below is the form which i loaded via ajax. When i run the form page directly then autofocus on c_name works in firefox but when loaded with ajax it doesn't! It works fine with opera/safari/chrome though!

<form action="client_entry_action.php" method="post" id="client_entry_form" name="client_entry_form">

<fieldset id="client_info_1">

    <label for="c_name">Name:</label> 
    <input type="text" name="c_name" required placeholder="Name" autofocus="autofocus" />

    <label for="c_phone">Phone Number:</label> 
    <input type="tel" name="c_phone" required placeholder="Mobile/Phone Number" />

    <label for="c_email">Email:</label> 
    <input type="email" name="c_email" required placeholder="email@example.com" />

    <label for="c_address">Address:</label> 
    <textarea name="c_address" ></textarea>


</fieldset>

<fieldset id="client_info_2">   

    <label for="c_info">Additional notes:</label> 
    <textarea name="c_info" ></textarea>

    <input type="submit" name="add_client" value="Add Client" />

</fieldset>        

</form>
Vishu7
  • 113
  • 1
  • 2
  • 6

4 Answers4

6

Autofocus is only done before onload has fired; it's meant to be a declarative way of specifying focus on initial page load.

Boris Zbarsky
  • 34,758
  • 5
  • 52
  • 55
  • It works fine with opera/safari/chrome though! Could you please elaborate little more? – Vishu7 Apr 01 '12 at 05:02
  • 5
    The spec doesn't define exact behavior for the attribute, so all the implementations involved are actually spec-compliant. The spec _does_ describe what the general idea is, but different browsers interpret what behavior that should lead to differently. – Boris Zbarsky Apr 01 '12 at 20:37
5

use settimeout after ajax call on the div, or using jquery use .ajaxComplete, or .done

function theAjax(){
//after the ajax actions loaded......
//use settimeout to refocused on the input..
var t=setTimeout("focusMe()",500);

}

function focusMe(){
document.getELementById("theInput").focus();  //the new input

}

//using jquery use .ajaxComplete, or .done
 $( document ).ajaxComplete(function() {
   $("#focusOnMe").focus();
 }
Densol
  • 135
  • 2
  • 5
3

I know this is old, but I just had this problem and maybe it helps someone.

If you use jQuery this works:

$("input[name='c_name']").focus();

Javascript would be something like this (general example): 

document.getElementById('element').focus();

But you have to call that function after your form is loaded via ajax!

kinske
  • 597
  • 8
  • 24
0

This worked for me:

$.get("/url.html", function(html) {
    var form = $("#form", html);// extract form with id=form from ajax response
    if (window.InstallTrigger) {// Detect Firefox and add focus script
        // place focus on first element containing autofocus attribute
        form.append("<script>$('[autofocus]')[0].focus();<\/script>");
    }
    $("#element").replaceWith(form);// Replace element with id=element with form
});

This is different from other solutions posted here because the script that places focus on the autofocus element is added to the DOM at the same time as the autofocus element itself thus ensuring that the script runs after the DOM is finished updating.

Note that this solution requires jQuery. If you are not using jQuery you can still do this easily enough with querySelectorAll

document.getElementById("element").innerHTML = form+"<script>document.querySelectorAll('[autofocus]')[0].focus()<\/script>"
PHP Guru
  • 1,301
  • 11
  • 20