概要
html で作った formから submit した値を
javaScript で操作して同じページに返そうと思ったら、
submitした後にCannot POST 〇〇/index.html
っていわれた。
環境
- AWS Cloud9
- jquery 2.2.4
原因
form の属性で action=""
としていたことにより、
存在しないパスにpost しようとしてコケていた模様。
エラーが発生したソース
html(form周辺)
<form class="my-form" action="" method="post"> <label for="name">名前</label> <input type="text" id="name"> <br> <input type="submit" value="送信"> </form> <div id="out-message"></div>
javaScript
$(function() { // 送信ボタン押下時 $(".my-form").submit(function() { $("#out-message").html("こんにちは、" + $("#name").val() + "さん"); }); });
解決方法
javaScript で必要な処理を実施したら、
return false;
すればOK。
$(function() { // 送信ボタン押下時 $(".my-form").submit(function() { $("#out-message").html("こんにちは、" + $("#name").val() + "さん"); return false; }); });
そもそも submit はほかの画面に値を渡すのが基本なので、
今回みたいに同じページ上で動的に処理したいだけなら
button に対して onClick 処理を実装したほうが自然な気がする。