jQuery ＋「sweetalert.js」の confirm 部分の記述について

以下のようなフォーム

<form action="send.php" method="post" name="check" onsubmit="return checkForm()">
<p><textarea name="content"></textarea></p>
<p><input type="submit" value="送信"></p>
</form>

を、以下の JavaScript で

function checkForm(){
if(document.check.content.value == ""){
alert("内容が未入力です");
return false;
}
if(confirm("送信しますか？")){
return true;
}
else{
return false;
}
}

内容が空 → アラートで「内容が未入力です」＆OKボタンのみが表示され「OK」ボタンでキャンセル
内容あり → アラートで「送信しますか？」＆キャンセルボタンとOKボタンが表示され「OK」ボタンで実行
と問題なく動作しております。

その上で、アラートを美しく実装できる jQuery + sweetalert.js を導入してみました。

■SweetAlert
https://sweetalert.js.org/

公式ドキュメントの説明通り、入力内容が未入力の場合は JavaScript の「alert」の記述を「swal」に変更することでカスタマイズされたアラートが表示されたのですが、「confirm」の箇所をどう記述すればいいのかドキュメントを読んでもよく分かりません。
詳しい方がいらっしゃいましたら、どうかご教授のほどお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

この質問が参考になりそうです。

SweetAlertでOK、Cancelを戻り値で返したい

コメントを受けて追記

こんな感じでしょうか。

html
1<form action="send.php" method="post" name="check" onsubmit="return checkForm(this)">

js
1function checkForm(form){(async form=>{
2if(document.check.content.value == ""){
3swal("内容が未入力です");
4return false;
5}
6if(await confirmOkCancelReturn("送信しますか？")){
7form.submit();
8}
9else{
10return false;
11}
12})(form)
13return false;
14}

投稿2022/07/01 03:08

編集2022/07/01 07:36

Lhankor_Mhy

総合スコア36115

QAMAX

2022/07/01 03:19 編集

ご返信有難うございます。以前、教えていただいた質問ページも拝見したことがあるのですが、自分のケースに置き換えた場合、具体的なJSの記述が分からず参考にすることが出来ませんでした (>_<) お手数をおかけして申し訳ございません。。

Lhankor_Mhy

2022/07/01 07:36

追記しました

QAMAX

2022/07/01 09:48 編集

ご返信有難うございます。また、具体的に記述くださり有難うございます。教えていただいた記述を試したのですが、内容が入力されていた場合のアラートが表示されませんでした。実際に html にして確認した際の内容が以下になるのですが、どの部分に問題がありますでしょうか？何度も申し訳ございません。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> <script> function checkForm(form){(async form=>{ if(document.check.content.value == ""){ swal("内容が未入力です"); return false; } if(await confirmOkCancelReturn("送信しますか？")){ form.submit(); } else{ return false; } })(form) return false; } </script> </head> <body> <form action="send.php" method="post" name="check" onsubmit="return checkForm(this)"> <p><textarea name="content"></textarea></p> <p><input type="submit" value="送信"></p> </form> </body> </html>

Lhankor_Mhy

2022/07/01 09:49

confirmOkCancelReturn はどこに記述されていますか？

Lhankor_Mhy

2022/07/01 10:06

わかりにくいですか？たとえば、alert() のようにカッコつきのものは、関数呼び出しなんです。そして、関数を呼び出すためには、関数定義が必要なんです。 swal("内容が未入力です"); という関数呼び出しが使えるのは、sweetalert.min.js に swal が定義されているからなんです。さて、 confirmOkCancelReturn("送信しますか？") というコードを書いていますが、この confirmOkCancelReturn の定義を書いていないのではないですか？　書いているとしたらどこに書きましたか？というのが上のコメントの趣旨です。

QAMAX

2022/07/01 10:11

理解できました！そして、最初に教えていただいた過去の質問を参考に confirmOkCancelReturn を付け加えたら、求めていた通りの動作を確認することができました。この度は何から何までご丁寧にご教授くださり本当に有難うございました m(_ _)m

行動規範の内容に同意します