Confirm alert before submit form javascript

Question

I want to delete a row from my table. The deletion will be held by click an anchor tag and it will submit the delete form. But before submitting the form it will show a confirm dialog box.

<tr>
  <td>    
    <a href="javascript:void(0)" onclick="$(this).parent().find('form').submit().confirm("Are you sure?")">Delete</a>
    <form action="{{route('area.destroy',$row->id)}}" method="post">
      @method('DELETE')
      {{csrf_field()}}
    </form>
  </td>
</tr>

How can I write the JS/jQuery code? Also, if I want to use sweet alert how can I do that?

score 1 · Answer 1 · answered May 20 '20 at 14:21

1

If you are able to modify the code, an easy inline solution can be to throw the alert on the onclick event of a submit button inside your form.

<tr>
    <td>
        <form action="{{route('area.destroy',$row->id)}}" method="post">
            @method('DELETE')
            {{csrf_field()}}
            <button type="submit" onclick="return confirm('Are you sure?')"></button>
        </form>
    </td>
</tr>

answered May 20 '20 at 14:21

Christophe Hubert

2,833
1
12
25

It's correct and tried it also. But is there any way to use the anchor tag? – Tusher May 20 '20 at 14:41

score 1 · Accepted Answer · answered May 20 '20 at 15:41

1

You can use SweetAlert with AJAX in Laravel

SweetAlert : check the documents: https://github.com/realrashid/sweet-alert

Form stackoverflow : Delete method with Sweet Alert in Laravel

Compte exemple: https://youtu.be/bE8Err1twRw

answered May 20 '20 at 15:41

Kais Chrif

134
5

score 0 · Answer 3 · edited Sep 04 '21 at 19:33

Try this:

Swal.fire({
   title: 'Yakin ingin menghapus penguji ?',
   text: "You won't be able to revert this !",
   icon: 'warning',
   showCancelButton: true,
   confirmButtonColor: '#3085d6',
   cancelButtonColor: '#d33',
   confirmButtonText: 'Yes, delete it!'
}).then((result) => {
   if (result.isConfirmed) {
      $(`[data-penguji=${id_penguji}]`).parents('.raised.card').remove()
   }
})

Confirm alert before submit form javascript

3 Answers3