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が表示されます。
もし原因がわかるようでしたら教えていただけると助かります。
(ケアレスミスのような気もしていますが)
#submitBtnはinput type="submit"なボタンで、それはform要素の子孫でしょうか。
もしそうであれば、submitボタンのclickイベントではなく、form要素のsubmitイベントにリスナを登録し、イベントのデフォルトアクション(action先への移動)を無効にすれば(jQueryであればリスナ内でreturn false;)よいと思います。
<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”が必要というのがわかりませんでした。感謝です。