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;
  });​

});

基本的に、フォームタグの下ではなく、ドキュメントのready関数（できればheadセクション）に関数を記述する必要があります。

あなたのコードについてのもう少しの提案

GoogleコードからjQueryの最新バージョンを使用しています。将来、バージョンが変更され、廃止される可能性があるため、Webページの機能が停止する可能性があります。したがって、常に次のような特定のバージョンを使用してください

<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

フォームを送信するには、submitタイプの入力を追加するか、呼び出しを作成する必要があります

于 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 に答える