Jqueryでアラートの確認ボタンを押してからphp側のPOST送信を実行したい

やりたいこと

SweetAlert2というライブラリを使用して、アラートを表示しOKを押した後フォーム側のＰＯＳＴ送信
を行いたいと思っております。

php
1<div class="row">
2    <div class="col-sm-5 offset-sm-5 text-right pb-2">
3        <button type="button" class="btn btn-primary"><i class="fa fa-check-circle"></i> 編集</button>
4        <button type="button" class="btn btn-outline-secondary hidden-xs" id="print"><i class="icon-printer"></i> 印刷</button>
5        <form id="basic-form" class="form-button" method="post" action="{{route('app.destroy', ['id' => $app->id])}}">
6         {{ csrf_field() }}
7        {{ method_field('delete') }}
8        <button type="submit" class="btn btn-danger"><i class="icon-trash"></i> 削除</button>
9        </form>
10    </div>
11    <div class="col-sm-2">
12    </div>
13</div>

$('.form-button').click(function(){
    Swal.fire({
        title: '重要確認',
        text: "本当に削除しますか？",
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'OK'
    }).then((result) => {
        if (result.value) {
            return true;
        }
    });
});
});

現在このようなコードを書いて、アラートも表示されるのですがPHP側の削除の方も並行して
進んでしまいOKを押さなくても完了してしまいます。

本来実装したかったOKを押したら、削除が実行されるというのはどのように記述すればよいでしょうか？

追記

jquery側でPOST送信をするやり方は調べたら出てきたのですが、phpでidを付けて送信しているのと
同じことを実装しようとすると躓きました。

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

回答1件

ベストアンサー

ES7のasync/awaitをLaravel Mixtとbabelでやる方がよりシンプルですが、
トランスコンパイラを使わない場合は、
一例として、以下のように、preventDefaultでブラウザの持つデフォルトアクションを防いだ後で、
アラート成功時に、イベントリスナを削除するunbindを組み合わせて、再度form送信イベントを呼び出すと動作します。

<body>
    <form action="{{ route('test.store') }}" method="post" id="form">
        @csrf
        <input type="text" name="test">
        <button>送信</button>
    </form>

<script>
    var onSubmit = function(e){
        e.preventDefault();
        Swal.fire({
            title: '重要確認',
            text: "本当に削除しますか？",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'OK'
        }).then(function(e){
            $('#form').unbind('submit', onSubmit);
            $('#form').submit();
        })
    }
    $("#form").on("submit",onSubmit)
</script>
</body>

参考
jQueryでsubmitイベントを一旦止めて、非同期してまた動かすの難しい

投稿2019/06/02 03:25