How to keep focus on text field after refresh in jquery

Question

How do I keep focus on a text field after refresh? I have code that auto detects when the user stops typing and at that point submits the form. But if the user wishes to to continue typing they have to click the text box again.

In addition if the query they are executing has no results then the value(text) inside the text field is erased. I've been at this for hours. Any help would be appreciated!

Jquery code:

<script>
$(document).ready(function() {
    $("#cat").change(function () {
    this.form.submit();
})

var typingTimer;                //timer identifier
var doneTypingInterval = 1000;  //time in ms, 5 second for example

//on keyup, start the countdown
$('#legal').keyup(function(){
    clearTimeout(typingTimer);
    if ($('#legal').val) {
        typingTimer = setTimeout(doneTyping, doneTypingInterval);
    }
});

//user is "finished typing," do something
function doneTyping () {
    $("form").submit();
}

});
</script>

PAGE CODE:

<%@ LANGUAGE="VBSCRIPT" %>
<%
pagetitle="Contractor Details"
%>
<!--#INCLUDE VIRTUAL="/_lib/include/header.htm"-->
<!--#INCLUDE VIRTUAL="/_lib/include/menu.htm"-->
<script>
$(document).ready(function() {
    $("#cat").change(function () {
    this.form.submit();
})

var typingTimer;                //timer identifier
var doneTypingInterval = 1000;  //time in ms, 5 second for example

//on keyup, start the countdown
$('#legal').keyup(function(){
    clearTimeout(typingTimer);
    if ($('#legal').val) {
        typingTimer = setTimeout(doneTyping, doneTypingInterval);
    }
});

//user is "finished typing," do something
function doneTyping () {
    $("form").submit();
}

});
</script>
<div class="twoColumnRow">
<div class="twoColumnContent">
<p class="breadCrm"><a href="/index.htm">Home</a> <span>&gt;</span> <a href="/tools/index.htm">Tools of the Trade</a> <span>&gt;</span> <a href="/tools/finance/index.htm">Finance and Purchasing</a><span>&gt;</span> <a href="/tools/finance/procurement/index.htm">Procurement and Contracts information</a></p>
<div class="contentPad">
<!-- Start of main content -->

<p class="imageRight">&nbsp;</p>
<h1><%=pagetitle%></h1>

<%
        Dim connectString, connect, conDB, sconDB, lDB, con, scon, lcon, src_abn, src_cat
        connectString = "Driver={Microsoft Text Driver (*.txt; *.csv)}; DBQ=" & Server.MapPath("data")
              src_legal = Request.QueryString("legal")
              src_cat = Request.QueryString("cat")
        set connect = Server.CreateObject("ADODB.connection")
        connect.open connectString

        if src_cat = "all" then
        conDB = "SELECT * FROM cont.csv WHERE ucase(legal) LIKE ucase('%"+src_legal+"%')"   
        lDB = "SELECT * FROM cont.csv WHERE ucase(legal) LIKE ucase('%"+src_legal+"%')" 
        else 
        conDB = " SELECT * FROM cont.csv WHERE " & src_cat & " = 'Yes' AND ucase(legal) LIKE ucase('%"+src_legal+"%')"
        lDB = " SELECT * FROM cont.csv WHERE " & src_cat & " = 'Yes' AND ucase(legal) LIKE ucase('%"+src_legal+"%')"
        end if

        sconDB = "SELECT * FROM cont.csv"   

        set con = connect.execute(conDB)
        set scon = connect.execute(sconDB)
        set lcon = connect.execute(lDB)
%>
<h2>Search results</h2>
<% if not con.BOF then %>
<div style="margin-top:1em">

  <form id="searchf" action="dbinstant.htm" method="get">

      <p>Company name:1<br/>
      <input id="legal" name="legal" type="text" value="<%=src_legal%>">
      </p>
     <p>Categories for Creative Design:<br/>
      <select id="cat" name="cat">
        <option class="group" label="All categories" value="all" <%if request.querystring("cat") = "all" then response.write("selected") %>></option>
        <option class="group" label="Strategic brand, marketing and communications advice" value="a" <%if request.querystring("cat") = "a" then response.write("selected") %>></option>
        <option class="group" label="Graphic design and layout" value="b" <%if request.querystring("cat") = "b" then response.write("selected") %>></option>
        <option class="group" label="Forms design" value="c" <%if request.querystring("cat") = "c" then response.write("selected") %>></option>
        <option class="group" label="Web design and development" value="d" <%if request.querystring("cat") = "d" then response.write("selected") %>></option>
        <option class="group" label="Authoring services" value="e" <%if request.querystring("cat") = "e" then response.write("selected") %>></option>
        <option class="group" label="Editorial services" value="f" <%if request.querystring("cat") = "f" then response.write("selected") %>></option>
        <option class="group" label="Translation services" value="g" <%if request.querystring("cat") = "g" then response.write("selected") %>></option>
        <option class="group" label="Photography and film services" value="h" <%if request.querystring("cat") = "h" then response.write("selected") %>></option>
        <option class="group" label="Scanning and digitisation services" value="i" <%if request.querystring("cat") = "i" then response.write("selected") %>></option>
        <option class="group" label="Multimedia editing services" value="j" <%if request.querystring("cat") = "j" then response.write("selected") %>></option>
      </select>
    </p>
    <input type="submit" value="Search" />
  </form>
  <br />

    <table style="font-size:.9em;" class="contentTable">
          <tr>
                <th>ABN:</th>
                <th>Company Name:</td>
          </tr>
  <% con.Movefirst() %>
  <% while (NOT con.EOF) %>
          <tr>
                <td width="120px"><%=con("abn")%></th>
                <td><a href="dbcomp.htm?abn=<%=con("abn")%>&cat=all"><%=con("legal")%></a></td>
          </tr>
  <%
    con.MoveNext()
    Wend
  %>
</table>

</div>
<% else %>
    <% scon.Movefirst() %>
  <form action="dbinstant.htm" method="get">

      <p>Company name:2<br/>
      <input id="legal" name="legal" type="text">
      </p>

     <p>Categories for Creative Design:<br/>
      <select id="cat" name="cat">
        <option class="group" label="All categories" value="all" <%if request.querystring("cat") = "all" then response.write("selected") %>></option>
        <option class="group" label="Strategic brand, marketing and communications advice" value="a" <%if request.querystring("cat") = "a" then response.write("selected") %>></option>
        <option class="group" label="Graphic design and layout" value="b" <%if request.querystring("cat") = "b" then response.write("selected") %>></option>
        <option class="group" label="Forms design" value="c" <%if request.querystring("cat") = "c" then response.write("selected") %>></option>
        <option class="group" label="Web design and development" value="d" <%if request.querystring("cat") = "d" then response.write("selected") %>></option>
        <option class="group" label="Authoring services" value="e" <%if request.querystring("cat") = "e" then response.write("selected") %>></option>
        <option class="group" label="Editorial services" value="f" <%if request.querystring("cat") = "f" then response.write("selected") %>></option>
        <option class="group" label="Translation services" value="g" <%if request.querystring("cat") = "g" then response.write("selected") %>></option>
        <option class="group" label="Photography and film services" value="h" <%if request.querystring("cat") = "h" then response.write("selected") %>></option>
        <option class="group" label="Scanning and digitisation services" value="i" <%if request.querystring("cat") = "i" then response.write("selected") %>></option>
        <option class="group" label="Multimedia editing services" value="j" <%if request.querystring("cat") = "j" then response.write("selected") %>></option>
      </select>
    </p>
    <input type="submit" value="Search" />
  </form>
  <br /><hr />
<p>No records match your query.</p>
<p><a href="dbtest.htm">Return to search page</a></p>
<%
  end if
  con.close
%>


<!-- End of main content -->
</div> <!-- end contentPad div -->
</div> <!-- end twocolumncontent div -->
<div class="twoColumnLinks">

<!--<div class="relatedLinks">
<h3>Related Links</h3>
<ul>
<li><a href="/index.htm">Related link 1</a></li>
</ul>
</div>--> <!-- end relatedlinks div -->
<!--#INCLUDE VIRTUAL="/_lib/include/quicklinks.htm"-->
<!--#INCLUDE VIRTUAL="/_lib/include/mylinks.htm"-->
</div> <!-- end twocolumnlinks div -->
</div> <!-- end twocolumnrow div -->
<!--#INCLUDE VIRTUAL="/_lib/include/footer.htm"-->

Answer 1

Try this again:

$(document).ready(function() {
    $("#cat").focus();
    $("#cat").val($("#cat").val());
    $("#cat").change(function () {
        this.form.submit();
    });
});

Answer 2

You can invoke the focus() event on the element you want text cursor to be placed. Eg: on your body onload section place $('#legal').focus()