人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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が表示されます。

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

●質問者: tmshare
●カテゴリ:インターネット ウェブ制作
✍キーワード:Click echo HelloWorld HTML JavaScript
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● rikuba
●60ポイント ベストアンサー

#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や使っているライブラリに関しての情報も併記してもらえれば答えやすいです。

◎質問者からの返答

ありがとうございます。

バッチリ改善しました。

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ