表单未在函数内部提交jquery

Question

我有一些jquery代码，当用户完成输入时执行函数doneTyping，这适用于任何代码。但是当我尝试使用“$（'＃searchf'）提交表单时，提交（）;”表格不提交。我尝试了很多变化。

有谁知道它为什么不起作用？ - 下面的Jquery代码

<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 () {
    $('#searchf').submit();
     alert("Your book is overdue.");
}

});
</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 () {
    $('#searchf').submit();
     alert("Your book is overdue.");
}

});
</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 i="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

由于您从未进行过设置，

this.form将始终为undefined。

this.form
  ↑   ↑
  |   └── 'form' is seen as a property of the 'window' object
  └── this is the 'window' object

你可能想要“说”的是

$("#cat").change(function () {
    $(this).form.submit();
});

但即使这会导致not a property例外，因为form不是$("#cat")的属性或对象......

所以，为了让您更轻松，而不是this.form.submit();将其更改为：

$("form").submit();

或具体（当您在页面中有多个表单时）

<form id="form1" ... >

$("#form1").submit();

即使页面中没有多个<form>，使用第二种方法也是一种好习惯！

Answer 2

我认为您错误输入了表单标记的ID。

在您的代码中：

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

正确：

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