Search code examples
javascriptphplaraveltwitter-bootstrapbootstrap-modal

Modal does not perform as expected (Action no working)

I'm having difficulties with the modal using Bootstrap 5, my Delete button should show a message confirming the action by the user, but the Modal confirmation button doesn't work.

The action I want of which is to delete a record doesn't work.

Image here

  • Delete button

    <!-- Form -->
    <form action="{{ url("delete/$hxh->id") }}" method="POST">
       {{ method_field('DELETE') }} {{ csrf_field() }}
       <button type="button" id="myButton" class="btn btn-danger" data-toggle="modal" data-target="#myModal"><i class="fa fa-trash"></i>&nbsp;Delete</button>
    </form>
  • Modal and Script

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Delete Hunter</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Do you really want delete <b>{{$hxh->name_hunter}}</b>?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fa fa-xmark"></i>&nbsp;Cancel</button>
                    <button type="submit" class="btn btn-danger"><i class="fa fa-trash"></i>&nbsp;Delete</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Script Modal -->
    <script>
        $('#myModal').on('shown.bs.modal', function () {
            $('#myButton').trigger('focus')
        })
    </script>
Solution

  • It is because there is no action performing on delete button so you should make it form the delete button

    <!-- Form -->
<button type="button" id="myButton" class="btn btn-danger" data-toggle="modal" data-target="#myModal"><i class="fa fa-trash"></i>&nbsp;Delete</button>


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Delete Hunter</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Do you really want delete <b>{{$hxh->name_hunter}}</b>?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fa fa-xmark"></i>&nbsp;Cancel</button>
        <form action="{{ url("delete/$hxh->id") }}" method="POST">
           {{ method_field('DELETE') }} {{ csrf_field() }}
           <button type="submit" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-trash"></i>&nbsp;Delete</button>
        </form>
        <button type="submit" class="btn btn-danger"><i class="fa fa-trash"></i>&nbsp;Delete</button>
      </div>
    </div>
  </div>
</div>