javaScriptで、Cannot POST 〇〇/index.html っていわれた

概要

html で作った formから submit した値を
javaScript で操作して同じページに返そうと思ったら、
submitした後にCannot POST 〇〇/index.html っていわれた。

環境

AWS Cloud9
jquery 2.2.4

原因

form の属性で action="" としていたことにより、
存在しないパスにpost しようとしてコケていた模様。

エラーが発生したソース

html（form周辺）

      <formclass="my-form"action=""method="post">
<labelfor="name">名前</label>
<inputtype="text"id="name">
<br>
<inputtype="submit"value="送信">
</form>
<divid="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 処理を実装したほうが自然な気がする。