javascriptの削除前confirmが利かない

Question

やりたいこと：

削除ボタンを押したときにアラートを出して、確認の仕組みを作る
はい ⇒ 削除
いいえ ⇒ 戻る

---

現状：
アラートは出ますが、いいえを押してもデータが消えます。

---

ソース：

//html部分

<form action="http://hogehoge.com/app_control/6" id="form_6" method="POST"> <input type="hidden" name="_token" value="5VLJtVtzd3BfilpM94IOlrPHABoUEYGzDxMbd4Wn"> <input type="hidden" name="_method" value="delete"> <a href="#" data-id="6" onclick="deletePost(this);"> <button class="btn btn-danger"> <i class="fa fa-trash"></i> 削除 </button> </a> </form>

//スクリプト部分

<script> function deletePost(e){ "use strict"; if(window.confirm('本当に削除しますか？')){ document.getElementById('form_' + e.dataset.id).submit(); }else{ window.alert('キャンセルされました'); } } </script>

---

javascriptのことを良くわかってないのだと思うのですが、
confirmで「はい」だったら送信しなさい、と書いているつもりなのですが、
いいえでも送信されてしまうのはなぜだかわかりません。

もしおわかりの方がいらしたら教えていただけませんか？

Answer 1

<button>要素は、特に指定しなければtype=submit、つまり送信ボタンとなってしまいます（MDN）。JavaScriptの実行が終わると、そのままフォーム送信が動作することとなります。

送信ボタン以外のボタンは、type=buttonを指定しておきましょう。

Comments

[takazou7777]

早速の回答ありがとうございました。スクリプトというよりもhtmlの問題だったのですね。button typeを意識したことがなかったので勉強になりました。ありがとうございました。

[maisumakun]

これは、知っていても意外と忘れてしまいがちになります（自分も、ついさっきやらかしていました）。

Answer 2

Submitボタンを設置した上で押したときにSubmitされないようにするためには明確にfunction()を返し（return）受け取る必要があります。

<a href="#" data-id="6" onclick="deletePost(this);"> 
↓
<a href="#" data-id="6" onclick="deletePost(this);return false;"> 

<script> 
function deletePost(e){ 
  "use strict"; 
  if(window.confirm('本当に削除しますか？')){ 
    document.getElementById('form_' + e.dataset.id).submit(); 
  }else{ 
    window.alert('キャンセルされました'); 
    return false; //追加
  } 
} 
</script>

Comments

[takazou7777]

回答ありがとうございます。明確にfalseを返す、というアプローチも有効なのですね。早速ソースに反映させていただきました。これでより安定したソースになったと思います。教えて頂いてありがとうございました。

[m.ts10806]

以前、仕組み上submitを外せない要件がありどうすればキャンセルで送信しないように出来るか調べた結果、このやり方に辿り着きました。要件により使い分けるといいかもしれませんね。