formの一部押下でアラートを出したい

Question

###前提

ECサイト作成中：（課題）

-商品詳細画面-

<form> ①数量選択：(select) ②カートに入れ購入する：（submit） ③カートに入れたまま買い物を続ける：（submit） </form>

①を選択後、② or ③クリックされた方をPOSTする。

###やりたいこと、
①を選択後、② or ③クリックされた方をPOSTすることはできたのですが、
②を選択したときのみ、ポップアップ or アラートを表示したいです。

###質問点：
formの中の一部をサブミットをした際にアラートを出したい。
（②のみ、サブミット時、JS等でアラートを出す）
どうすれば宜しいでしょうか？

<form> ①数量選択：(select) ②カートに入れ購入する：（submit） //　ここを押下したときのみアラート！！ ③カートに入れたまま買い物を続ける：（submit） </form>

<form method="post" action="cookie_try.php">

//①購入する数量を選択

数量：<select name="cnt" value="">
<option value="1" selected>1</option> /*　←初期値は「selected」を入れておく　*/
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

//②id="cart"のみポップアップ or アラートを表示させたい！！

<p><input type="submit" id="cart" name="cart" value="カートに入れたままやで" ></p>

//③id="ncart"はアラートなし
<p><input type="submit" id="ncart" name="ncart" value="カートに入れて購入をする"></p>
</form>

###試したこと
上記の①～③をformごとに記述

<form>①</form> <form>②</form> <form>③</form>

↑結果アラートは出るが、①の結果がPOSTされない。

POSTさせるため以下にしている

<form> ①②③ </form> ↑POSTされるが、同じフォームのため、③押下でもアラートがでてしまう

Comments

[m.ts10806]

なんのアラートを出すのか具体的に記載してください。

[Roo]

失礼しました、次回以降参考にさせていただきます。
今回もご指摘いただきありがとうございました。

[m.ts10806]

あまり「自分が解決すればそれでいい」という姿勢は見せない方が良いかと思います。要件不明瞭なまま解決した感をだすのは問題です

Answer 1

alertだしてどうするのかわからないので一応confirmにしときました

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('#cart').addEventListener('click',e=>{
    if(!confirm('OK?')){
      e.preventDefault();
    }
  });
});
</script>
<form method="post" action="cookie_try.php">
数量：<select name="cnt" value="">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<p><input type="submit" id="cart" name="cart" value="カートに入れたままやで" ></p>
<p><input type="submit" id="ncart" name="ncart" value="カートに入れて購入をする"></p>
</form>

Comments

[Roo]

お忙しいなか、お早い解答ありがとうございます。
解決いたしました。JS...。勉強せねば。
とても助かりました。