Java Scriptのconfirmでキャンセルしても処理が進んでしまう。

Question

質問失礼します。

現在confirmを使用しキャンセルをクリックした際、処理をせず終了したいのですが処理がそのまま進んでしまいます。
PHPにて削除ボタンが複数あり、idを割り振れていないのが原因でしょうか。
以下がコードになります。

PHPにて所定のディレクトリの任意数のファイルを画面上に表示しています。
ファイルの数は変動します。

PHP

<ul>
<?php for($i = 0; $i < $filesCnt; $i++){ ?>
	<li>
		<a href="<?=$files[$i]?>" download="<?=basename($files[$i])?>">
			<?=basename($files[$i])?>をダウンロード
		</a>
		<form action="delete" method="post" onclick="deleteCheck()" enctype="multipart/form-data">
			<input class="hide" type="hidden" name="path" value="<?=$files[$i]?>">
			<button class="delete" type="submit">ファイルを削除する</button>
		</form>
	</li>
<?php } ?>
</ul>

onclick="deleteCheck()をbuttonに記述しても動作は同じでした。

JS

function deleteCheck() {
    if(confirm("削除を実行しますか？")){
    }
    else {
        alert("削除をキャンセルしました");
    }
}

以上、解決方法や参考ページをご存じの方がいらっしゃいましたらご教授いただけますと幸いです。

よろしくお願いいたします。

Comments

[maisumakun]

> 処理をせず終了したいのですが処理がそのまま進んでしまいます。

どの部分で「処理が中断する」効果を持つと考えましたか

[ringoame49]

ご質問ありがとうございます。
confirmを記述すれば良いと勘違いしておりました。

色々調べてtrueやfalseを返す事を知れました。

Answer 1

onclick="deleteCheck()" 
↓↓↓
onclick="return deleteCheck()" 

としておいて、こんな感じ

function deleteCheck() {
   var ret=confirm("削除を実行しますか？");
   if(!ret) alert("削除をキャンセルしました");
   return ret;
}

Comments

[ringoame49]

ご回答と正しい記述をお教えいただきありがとうございます。

無事に動作いたしました。

Answer 2

formのclickイベントにしている意図が今ひとつ見えませんが（通常はsubmitのはず）、
キャンセル押されても何もしてないのでそのまま送信しています。
キャンセル時にはreturn falseしてください。

ただ、submitイベントだと場合により送信してしまっていたりすることもないわけではないので（ここ曖昧で申し訳ない）、
確実に止めるならボタンをtype=buttonにしたうえで、formではなくボタンのclickイベントに変更し
form.submitをJavaScriptでしたほうが良いです。

Comments

[ringoame49]

ご回答ありがとうございます。

勉強の参考にさせていただきます！