How to pass value to bootstrap modal window ?

change the modal to

<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Delete Company</h4>
            </div>
            <div class="modal-body">
                    Are you sure you want to delete?
            </div>
            <div class="modal-footer">
                <form id="userForm" action="" method="post">
                    @csrf
                    @method('DELETE')
                    <input type="hidden" name="id">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-danger">Delete</button>
                </form>
            </div>
        </div>
    </div>
</div>

add this javascript somewhere at the end:

$('#deleteModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget);
        var id = button.data('id');

    $('#userForm').attr("action", "{{ url('/companies') }}" + "/" + id);
})

please gvie me a feedback on this as I am writting form my phone

They do show this in the bootstrap docs as well: https://getbootstrap.com/docs/4.0/components/modal/#varying-modal-content

Still no luck... Not sure what's wrong ?

    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">Delete Company</h4>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete?
                </div>
                <div class="modal-footer">
                    <form id="deleteForm" action="" method="post">
                        @csrf
                        @method('DELETE')
                        <input type="hidden" name="companyId" id="companyId" value="">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-danger">Delete</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $('#deleteModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget)
            var companyId = button.data('companyId');

            var modal = $(this)
            modal.find('#deleteForm').attr("action", "{{ url('/companies') }}" + "/" + companyId)
            modal.find('#deleteForm input').val(companyId)
        })
    </script>

@jcmargentina and @Cronix Thanks for the response but can't make it work.

Man i wrote the code for you. at least use it first and then try to edit it.

your javascript is wrong .... again.

check the code you gave us. then use mine. and see results

Also ... the original code is not the same as the last code you provide.

Be clean

@jcmargentina my bad... i did exactly what you wrote and it makes complete sense as well but I keep getting this exception:

Symfony \ Component \ HttpKernel \ Exception \ MethodNotAllowedHttpException
No message

<form id="userForm" action="" method="post">
                    @csrf
                    @method('DELETE')

I don't see an action (url) to send the data to so it will send to the same url as the page is on. This is ok, but not preferred. Also, the route needs to be a Route::delete()

@Cronix isn't this suppose to take care of the form action?

$('#userForm').attr("action", "{{ url('/companies') }}" + "/" + id);

and for the route i'm using a resource route

Route::resource('companies', 'CompaniesController');

and in CompaniesController calling function:

public function destroy($id)
    {
        $company = Company::findOrFail($id);
        if($company->logo != 'default.png') {
            Storage::delete('public/uploads/'.$company->logo);
        }
        $company->delete();


        $notification = [
            'message' => 'Company has been deleted successfully!',
            'alert-type' => 'success'
        ];

        return redirect()->route('companies.index')->with($notification);
    }

Sure, but none of that was posted before so I wouldn't be able to know that.

But MethodNotAllowedHttpException means you are sending the wrong request type to an endpoint. Like sending a GET request to a POST route, or sending a DELETE request to a POST route, etc.

Is your javascript in a blade file, or in a js file? If it's a js file, this won't work:

$('#userForm').attr("action", "{{ url('/companies') }}" + "/" + id);

since javascript doesn't know what blade {{ }} syntax is

If it's not in a blade file (regular .js file), you could just change it to

$('#userForm').attr("action", "/companies/" + id);

Hallo @sunnyboy ,

as @Cronix said , the problem that your code to change the action attr not working.

open your browser developer tool and check if the form send the request to the right url.

regard's Ahmad

try this code in your view, do no separate the JS to another file, keep it in the view.

<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Delete Company</h4>
            </div>
            <div class="modal-body">
                    Are you sure you want to delete?
            </div>
            <div class="modal-footer">
                <form id="userForm" action="" method="post">
                    @csrf
                    @method('DELETE')
                    <input type="hidden" name="id">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-danger">Delete</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
$('#deleteModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget);
        var id = button.data('id');

    $('#userForm').attr("action", "{{ url('/companies') }}" + "/" + id);
});
</script>

please make sure Jquery is loaded before this.

Give some feedback

@Cronix sending the wrong request type to an endpoint is not an issue i guess as the similar code works for show but since is that has single record so i have easy access to company id but here with for loop and modal dialog is out of scope its causing fuss for me.

JavaScript is in the same file as modal dialog.... and no it's not a js file it's a blade file

@ahmad-saad not sure what do you mean and i don't blame you as I am fairly new to js and chome developer tools so straight answer is not sure how to do that.

@jcmargentina this looks the same and yes it is in the same file.

Is there any other code you're not showing? Like, are you actually making an ajax request somewhere to submit the form instead of regular html?

We really need to know more details of what's actually happening.

1. Does it actually send the form to the correct url (check network tab of browser dev tools)?
2. Is it sending a _method attribute in the request with the type of "delete"

The only time you'd see the MethodNotAllowedHttpException error is if you are sending the wrong crud verb (GET/PUT/PATCH/POST/DELETE) to an endpoint that doesn't match the verb.

Here is the entire code:

web.php

Route::resource('companies', 'CompaniesController');
Route::resource('employees', 'EmployeesController');

index.blade.php

@extends('adminlte::page')

@section('htmlheader_title')
    Companies
@endsection

@section('main-content')
    <div class="container-fluid spark-screen">
        <div class="row">
            <div class="col-md-12">
                <div class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title">List of Companies</h3>
                        <div class="box-tools pull-right">
                                <a href="{{ url('companies', 'create') }}" title="Create a new Company"><i class="fa fa-plus"></i> <strong> NEW</strong></a>
                        </div>
                        <!-- /.box-tools -->
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <table id="companyTable" class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>Name</th>
                                    <th>Website</th>
                                    <th class="text-center">Actions</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th></th>
                                    <th>Name</th>
                                    <th>Website</th>
                                    <th class="text-center">Actions</th>
                                </tr>
                            </tfoot>
                            <tbody>
                                @foreach($companies as $company)
                                <tr>
                                    <td></td>
                                    <td><a href="{{ url('companies',$company->id) }}">{{ $company->name }}</a></td>
                                    <td>{{ $company->website }}</td>
                                    <td class="text-center">
                                        <a href="{{ url('companies', $company->id) }}" title="View" class="text-info"><i class="fa fa-eye "></i></a>
                                        <a href="{{ url('companies', $company->id) }}/edit" title="Edit" class="text-success"><i class="fa fa-pencil"></i></a>
                                        <a href="#" title="Delete" class="text-danger" data-toggle="modal" data-target="#deleteModal" data-id="{{ $company->id }}"><i class="fa fa-trash"></i></a>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <!-- /.box-body -->
                    </div>
            </div>
        </div>
    </div>
    
    <!-- Delete Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Delete Company</h4>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete?
                </div>
                <div class="modal-footer">
                    <form id="userForm" action="" method="post">
                        @csrf
                        @method('DELETE')
                        <input type="hidden" name="id">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-danger">Delete</button>
                    </form>
                </div>
            </div>
    </div>
    </div>
    <script type="text/javascript">
        $('#deleteModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var id = button.data('id');

        $('#userForm').attr("action", "{{ url('/companies') }}" + "/" + id);
        });
    </script>
@endsection

CompaniesController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Support\Facades\Storage;
use Illuminate\Http\Request;
use App\Company;

class CompaniesController extends Controller
{

    public function index()
    {
        $companies = Company::get();
        // dd($companies);
        return view('companies.index', compact('companies'));
    }


    public function destroy($id)
    {
        $company = Company::findOrFail($id);
        if($company->logo != 'default.png') {
            Storage::delete('public/uploads/'.$company->logo);
        }
        $company->delete();


        $notification = [
            'message' => 'Company has been deleted successfully!',
            'alert-type' => 'success'
        ];

        return redirect()->route('companies.index')->with($notification);
    }
}

thanks for the code ... ok lets debug

open chrome

then press F12 it will open the developer tools.

RELOAD the page with the developer tools open ... and go into the "Console" tab ... and check for some errors there .

If there are no errors ... continue ..

go to the network Tab, and check the Preserve Log checkbox on it ... then press the delete button on some item on your list ... the modal should open .. did open ? ... if yes ... delete!

you will see that some content starts apearing .... thats your netwrk traffic generated by the website through your browser.

examine the request made (specially the URL where you are sending the request to ) and the response you get from the server.

please check all this and share.

PD: when the modal pops up ... right click it ... and choose "INSPECT" ... see the ... and check the "action" is right too .

For giggles, try wrapping the js in a domready event. It won't hurt anything with it, but could without.

<script type="text/javascript">
    $(function() { // add this
        $('#deleteModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var id = button.data('id');

            $('#userForm').attr("action", "{{ url('/companies') }}" + "/" + id);
        });
    }); // and this
</script>

So finally after struggling for couple of days I got it working. YEAH !!! Here is my solution:

Inside my View

<a class="text-danger delete-company" data-toggle="modal" data-target="#deleteModal" data-id="{{ $company->id }}" data-url="{{ url('companies', $company->id) }}">
    Delete
</a>

. . .

<form action="" method="post" id="deleteForm">
  @csrf 
  @method('DELETE')
  <input type="hidden" name="id" value"">
  <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          Are you sure you want to delete the company?
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-danger">Delete</button>
        </div>
      </div>
    </div>
  </div>
</form>

The Missing Piece - JavaScript

$(document).ready(function () {
    // For A Delete Record Popup
    $('.delete-company').click(function () {
        var id = $(this).attr('data-id');
        var url = $(this).attr('data-url');

        $("#deleteForm", 'input').val(id);
        $("#deleteForm").attr("action", url);
    });
});

NOTE: It really doesn't matter where you put the JS or the Modal, I had them all in the seperate files and it worked for me. THANKS TO EVERYONE ?

glad to know you got it ... but the

<input type="hidden" name="id" value"">

is redundant ... you dont need it at all.

I think we already achieve your petition a while ago my friend.

Was it the domready event that made it work?

These are really the same thing

$(document).ready(function () {

$(function() {

I just prefer the 2nd one that I suggested as it's shorter.

@jcmargentina good catch, and now with data-url I don't even need the id itself.

$(document).ready(function () {
    $('.delete-company').click(function () {
        var url = $(this).attr('data-url');
        $("#deleteForm").attr("action", url);
    });
});

@Cronix I don't think that what did, i guess it was

$('#deleteModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget);
    var id = button.data('url');
    $('#deleteForm').attr("action", url);
});

instead of this that was causing the issue but as I said I am totally new to JS.

$('.delete-company').click(function () {
    var url = $(this).attr('data-url');
        $("#deleteForm").attr("action", url);
});
``

@SUNNYBOY - I have this problem where the Javascript does not seem to be working. For example, if I test a

console.log('clicked!');

Nothing is shown in the developer tools.

I am using the Laravel's app.js. What are you using???

It was for me. thanks :)