Question

以下是我的代码。我想要的是每当表单被提交以运行3个jQuery行，这些行移动一些定位和可见性。现在，每当我提交表格时，都没有任何反应。我哪里错了？

    <!DOCTYPE html>
   <html>
<head>
    <title>Webther - What's it like out?</title>
    <link rel="stylesheet" type="text/css" href="css/desktop.css" />
    <script src="http://code.jquery.com/jquery-latest.js"></script>

    <script type="text/javascript">
    function showResult(str)
    {
    if (str.length==0)
      { 
      document.getElementById("livesearch").innerHTML="";
      document.getElementById("livesearch").style.border="0px";
      return;
      }
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        var response=xmlhttp.responseText;
    if (response.length!=0)
      { 
        document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
        document.getElementById("livesearch").style.border="1px solid #A5ACB2";
      }
        }
      }
    xmlhttp.open("GET","livesearch.php?q="+str,true);
    xmlhttp.send();
    }

    function ChangeVal()
    {
    document.getElementById("searchbox").value="";
    }
    </script>
        </head>
        <body>
            <div id="pagecontainer">
        <div id="indexlogocontainer">
            <img id="indexlogo" src="images/fulllogo.png" />
        </div>
        <div id="indexsearchcontainer">

                <div id="searchsurround"><form id="searchform"><input type="text" autocomplete="off" id="searchbox" name="q" size="50" value="Enter a city or zipcode here!" onkeyup="showResult(this.value)" onclick="ChangeVal()"/>
                &nbsp;&nbsp;<input type="image"  alt="Go!"   src="images/goicon.jpg" id="searchsubmit" /></form></div>
    <script type="text/javascript">
$("form").submit(function() {
    $("#indexlogocontainer").animate({ marginTop: '-40px' }, 1000);
    $("#mylocations").fadeOut("slow");
    $("#forecast").fadeIn("slow");
    return false;
  });
    </script>
                <div id="livesearch"></div>

        </div>
        <div id="mylocations">
            <h1>My Locations</h1>
            <ul>
                <li>BLAH</li>
                <li>Blah!</li>
            </ul>
        </div>
        <div id="forecast" style="display: none;">
            PAGE INFO
        </div>
    </div>

</body>
    </html>

Answer 1

$(document).ready(function(){

  $("form").submit(function() {
     $("#indexlogocontainer").animate({ marginTop: '-40px' }, 1000);
     $("#mylocations").fadeOut("slow");
     $("#forecast").fadeIn("slow");
     return false;
  });

});

基本上你必须在文档的就绪函数（最好是在head部分）中编写函数，而不是在form标签下面。

关于您的代码的更多建议

您正在使用谷歌代码中的jQuery最新版本。将来版本可能会发生变化，很少有东西可能会被弃用，因此可能会停止您的网页功能。所以总是使用像

这样的特定版本

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">

和

学习并使用jQuery的ajax函数。这将是短暂而灵活的。参考http://api.jquery.com/jQuery.ajax/

Answer 2

您需要添加提交类型的输入或写一个提交表单的电话

Answer 3

这是错误的，一旦你使用以下代码中的警告框检查表单就没有提交按钮和动作提交。由于表单没有提交，下面的代码没有执行。我在评论中添加了警告框

$("form").submit(function() {
//alert("form is submitted");
$("#indexlogocontainer").animate({ marginTop: '-40px' }, 1000);
$("#mylocations").fadeOut("slow");
$("#forecast").fadeIn("slow");
return false;
});

Answer 4

<script type="text/javascript">
$("form").submit(function() {
$("#indexlogocontainer").animate({ marginTop: '-40px' }, 1000);
$("#mylocations").fadeOut("slow");
$("#forecast").fadeIn("slow");
return false;
});?
</script>

当我尝试运行代码时，由于不必要的问号，我遇到了js问题。请删除？在脚本之后......它运行良好

jQuery表单提交事件根本不起作用

4 个答案: