0

以下是我的代码。我想要的是每当提交表单以运行围绕一些定位和可见性移动的 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>
4

4 回答 4

2 
$(document).ready(function(){

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

});

基本上，您必须在文档的准备功能（最好在头部）中编写函数，而不是在表单标签下方。

关于您的代码的更多建议

您正在使用来自谷歌代码的 jQuery 最新版本。将来版本可能会更改，并且很少有东西可能会被弃用，因此可能会停止您网页的一些功能。所以总是使用特定的版本，比如

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

和

学习和使用jQuery的ajax功能。这将是简短而灵活的。参考http://api.jquery.com/jQuery.ajax/

于 2012-06-15T04:01:08.397 回答
0

您需要添加提交类型的输入或编写调用以提交表单

于 2012-06-15T04:02:15.503 回答
0

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

$("form").submit(function() {
//alert("form is submitted");
$("#indexlogocontainer").animate({ marginTop: '-40px' }, 1000);
$("#mylocations").fadeOut("slow");
$("#forecast").fadeIn("slow");
return false;
});​
于 2012-06-15T04:19:17.430 回答
-1 
<script type="text/javascript">
$("form").submit(function() {
$("#indexlogocontainer").animate({ marginTop: '-40px' }, 1000);
$("#mylocations").fadeOut("slow");
$("#forecast").fadeIn("slow");
return false;
});?
</script>

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

于 2012-06-15T04:12:47.817 回答