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

Question

这是我的标签

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

这是脚本

<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)
    })

这是模态，我需要接收变量 $x

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

这是完整的模态

<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>

我不知道如何在使用 id 不是 function 时传递变量我必须将变量 $x 发送到该 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;

})

所以我认为应该是这样的，请尝试并根据您的需要进行修改您还可以从 ahref 标签中删除 data-toggle 属性

Answer 2

我知道您要实现的是不同的解决方案，但我会做一些不同的事情。 首先，我会将表单更改为 POST 方法并添加将保存客户 ID 的隐藏输入，也不要忘记@csrf。 这意味着您必须更改路由并始终检查后端的数据，因为无论如何您都不能信任客户端。

<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>

然后对于 javascript 部分，当打开模式时，您可以按原样使用事件显示，但您应该将数据值注入输入。 例如我添加了 id 属性“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>

现在脚本是

<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

试试这个按钮

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

像这样的表单标签

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

和 jquery 这样的脚本

$('.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);
    })