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周辺）

      <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;
  });
});