javascriptについて教えてください。

submitボタン押下時に動作するよう記述しているのですがうまく動作しません。

$(function(){
  $("#submitBtn").click(function(){
    $.post(
      "./test.php",
      {},
      function(data){
        $("#result_box").html(data);
    });
  });
});

test.phpはechoでHelloWorldを返すだけです。
動作確認のために上記のような記述になっていますが、もともとはフォーム入力項目をPHP側で処理をさせ、result_boxへ出力させる処理です。

上記はSubmitBtnをクリックするように記述していると動作しませんが、("#submitBtn").clickを削除すると読み込み時にHelloWorldが表示されます。

もし原因がわかるようでしたら教えていただけると助かります。
(ケアレスミスのような気もしていますが)

回答の条件
  • URL必須
  • 1人2回まで
  • 13歳以上
  • 登録:2010/12/06 20:18:58
  • 終了:2010/12/06 21:51:53

ベストアンサー

id:rikuba No.1

rikuba回答回数26ベストアンサー獲得回数122010/12/06 21:22:29

ポイント60pt

#submitBtnはinput type="submit"なボタンで、それはform要素の子孫でしょうか。

もしそうであれば、submitボタンのclickイベントではなく、form要素のsubmitイベントにリスナを登録し、イベントのデフォルトアクション(action先への移動)を無効にすれば(jQueryであればリスナ内でreturn false;)よいと思います。

http://api.jquery.com/submit/

<script>
$(function(){
  $("#regist").submit(function(){
    $.post(
      './test.php',
      {},
      function(data){
        $("#result_box").html(data);
    });
    return false;
  });
});
</script>
</head>
<body>
<form action="test.php" id="regist">
<input type="submit" id="submitBtn">
</form>
<div id="result_box"></div>

// HTMLや使っているライブラリに関しての情報も併記してもらえれば答えやすいです。

id:tmshare

ありがとうございます。

バッチリ改善しました。

”return false”が必要というのがわかりませんでした。感謝です。

2010/12/06 21:51:30
  • id:taknt
    ブラウザのせい?
  • id:tmshare
    コメントどうもです。
    ブラウザは一応ChromeとFirefoxで試していましたが同様でした。

    上記のとおりreturn falseを記述したら解決しました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません