ishii-akihiro’s blog

いろいろ試したことやバグ対応の作業履歴を残していきます。

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

概要

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

環境

原因

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 処理を実装したほうが自然な気がする。