表单每次都在循环中提交最终对象答案

【问题标题】：Form submits for final object in a loop every time表单每次都在循环中提交最终对象
【发布时间】：2017-11-02 01:41:32
【问题描述】：

我有一个循环，它输出一个类别列表并创建一个按钮，该按钮召唤一个引导模式进行确认。一旦确认表单提交，但这就是它出错的地方。表单始终提交列表中的最后一项，而不是选定的一项。正如您在下面看到的，我已将值输出到控制台，并且它们每次都输出正确的值。

例如，当前有 9 个类别，因此有 9 个按钮。

我选择要删除的第一个类别 - Category{"id":1;"name":'Music'}
控制台输出：

1

音乐
Bootstrap Modal 显示“删除类别：音乐”
当我确认这是我要删除的对象时，它会删除第 9 个类别。

我做错了什么？

循环：

<table class='table table-striped' id="datatable-table" >
            <thead>
                <tr>
                    <th>Name</th>
                    <th width="100px"></th>
                </tr>
            </thead>
            <tbody>
                @foreach($categories as $category)
                <tr>
                    <td><a href="{{ route('categories.show', $category->id) }}">{{ $category->name }}</a></td>
                    <td>
                        <button class="btn btn-warning btn-sm btn-danger delete-category-modal" value="{{$category->id}}"
                                data-toggle="modal"
                                data-target="#deleteModal"
                                data-backdrop="static"
                                data-name ="{{$category->name}}"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>

模态：

<div id="deleteModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
           <div class="modal-header">
            <h5 class="modal-title">Delete Category</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
           </div>
           <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            {{ Form::model($category, ['route' => ['categories.destroy', $category->id], 'method' => 'delete']) }}
            {{ Form::submit('Delete', ['class' => 'btn btn-danger', 'name' => 'edit-btn']) }}
            </div>
            {{ Form::close() }}
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>

脚本：

$('button.delete-category-modal').on('click', function (e) {
            // Make sure the click of the button doesn't perform any action
            e.preventDefault();

            // Get the modal by ID
            var modal = $('#deleteModal');

            // Set the value of the title fields
                modal.find('.modal-title').text('Delete Category: ' + $(this).data('name'))

            // Update the action of the form
            modal.find('form').attr('DELETE', '/categories/'+ $(this).val());
                console.log($(this).data('name'))
                console.log($(this).val())
        });

【问题讨论】：

标签： javascript php jquery twitter-bootstrap forms

【解决方案1】：

我似乎已经解决了我自己的问题，在模态上：

{{ Form::model($category, ['route' => ['categories.destroy', $category->id], '方法' => '删除']) }}

$category->id 应该是 'null'

这样 jQuery 就可以用选定的值覆盖它

【讨论】：