如何在 laravel 刀片中将变量从标签传递到模态

Question

this is my tag

    <a data-toggle="modal" data-id="{{$x}}" data-target="#exampleModal" title="آزاد سازی موجودی" class="datatables__button function"><i class="mdi mdi-autorenew"></i></a>

this is script

<script>

    $('#exampleModal').on('show.bs.modal', function (event) {
        console.log(data)
        var button = $(event.relatedTarget)
        var recipient = button.data('whatever')

        var modal = $(this)
        modal.find('.modal-title').text('New message to ' + recipient)
        modal.find('.modal-body input').val(recipient)
    })

and here is modal where I need to recive variable $x

                <form method="get" action="{{route('backend.customers.release-balance',['customer' => $customer->id])}}">

here is complete modal

<div class="modal fade" id="exampleModal" 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" id="exampleModalLabel">درخواست آزادسازی موجودی</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <form method="get" action="{{route('backend.customers.release-balance',['customer' => $customer->id])}}">
                <div class="form-group">
                    <label for="recipient-name" class="col-form-label">مقدار:</label>
                    <input name="amount" type="text" class="form-control" id="recipient-name">
                </div>
             
                <div class="form-group">
                    <button type="submit" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button  type="submit" class="btn btn-primary">Send message</button>
                </div>
            </form>
        </div>
    </div>
</div>

I don't know how to pass variable when in using id not function I have to send variable $x to that href

Answer 1

$('a.datatables__button').on('click', function(e) {
   e.preventDefault();
   var $button = $(this)
   var $modal = $('#exampleModal')
   let id = $button.data('id')
   console.log('id from ahref', id)
   $modal.modal('show');
   // now you can use the variable id and pass it to the modal 
   //example
   $("input[name='amount']", $modal).val(id)
   return false;

})

so I think should be something like this, please try it and modify it by your needs Also you can remove data-toggle attribute from ahref tag

Answer 2

I know it's different solution that you are trying to achieve but I would do it somewhat different. First I would change form to POST method and add hidden input which will hold the customer ID, also don't forget @csrf. This means you have to change your route and always check the data on backend as you can't trust client side no matter what.

<div class="modal-dialog" role="document">
<div class="modal-content">
    <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">درخواست آزادسازی موجودی</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <form method="post" action="{{route('backend.customers.release-balance')}}">
            @csrf
            <input type="number" id="input-customer-id" hidden name="customer_id"/>
            <div class="form-group">
                <label for="recipient-name" class="col-form-label">مقدار:</label>
                <input name="amount" type="text" class="form-control" id="recipient-name">
            </div>
         
            <div class="form-group">
                <button type="submit" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button  type="submit" class="btn btn-primary">Send message</button>
            </div>
        </form>
    </div>
</div>

Then for javascript part when opening the modal you can use event show as you are but you should inject the data value into the input. For example I've added id attribute "input-customer-id"

   $('#exampleModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget);
   
    var recipient = button.data('id') // Target data-id
    console.log(recipient); // Here you can see the data-id value from a element
    var modal = $(this)
    modal.find('.modal-title').text('New message to ' + recipient)
    modal.find('.modal-body input').val(recipient)
    modal.find('#input-customer-id').val(recipient); // set input value
})

Answer 3

<a id="openModal"  data-id="{{$x}}"  title="آزاد سازی موجودی" class="datatables__button function"><i class="mdi mdi-autorenew"></i></a>

Now script is

<script>

$('#openModal').on('click', function(){
    $('#exampleModal').modal('show');
    var button = $(this)
    var recipient = button.data('id')

    $('#exampleModal').find('.modal-title').text('New message to ' + recipient)
    $('#exampleModal').find('.modal-body input').val(recipient)
})

Answer 4

Try like this Button

 <a data-toggle="modal" data-id="{{$x}}"  title="آزاد سازی موجودی" class="datatables__button open_modal function"><i class="mdi mdi-autorenew"></i></a>

Form tag like this

<form method="get" class="test_form" action="{{route('backend.customers.release-balance',['customer' => $customer->id])}}">

And jquery script like this

$('.open_modal ').on('click', function (event) {
 
        let x = $(this).attr('data-id');

        var modal = $('#exampleModal');
        modal.modal('show');
        modal.find('.modal-title').text('New message to ' + recipient);
        modal.find('.modal-body input').val(recipient);

       $('.test_form').attr('data-id', x);
    })