Laravel 5.6 循环内模态框表单无法提交问题求助

核心问题原因 #

你遇到的两个问题本质上都是HTML结构不符合规范和重复DOM元素/事件冲突导致的：

1. 当你把模态框放在@foreach循环内的<tr>之后时，相当于把<div>（模态框）直接放在了<tbody>里面——但HTML规范里<tbody>只能包含<tr>元素，浏览器会自动把模态框移到表格外部，这会破坏Bootstrap模态框的内部事件绑定，导致表单提交无响应。
2. 当你把模态框移到@foreach外部时，循环会重复生成同一个模态框的HTML，最后一次循环的id="editTestimonial{{$item->id}}"会覆盖之前的所有，所以只有最后一个编辑按钮的data-target能匹配到模态框。

修复方案一：规范HTML结构，循环生成模态框到表格外部 #

我们可以把表格行和模态框分开生成，模态框放在表格的外面（但依然在@foreach循环内），这样既保证每个条目对应唯一的模态框，又符合HTML结构规范：

<!-- 先渲染表格 -->
<table>
    <tbody>
        @foreach ($testimonials as $item) 
        <tr class="text-muted"> 
            <td class="text-capitalize">{{ $item->firstname }}</td> 
            <td class="text-capitalize">{{ $item->lastname }}</td> 
            <td>{{ $item->comment }}</td> 
            <td class="text-capitalize">@if ($item->status === 0) hidden @else showing @endif</td> 
            <td> 
                <button type="button" class="btn-custom-one" data-toggle="modal" data-target="#editTestimonial{{$item->id}}">Edit</button> 
            </td> 
        </tr> 
        @endforeach
    </tbody>
</table>

<!-- 再循环渲染所有模态框，放在表格外部 -->
@foreach ($testimonials as $item) 
{{-- Edit Modal --}} 
<div class="modal fade" id="editTestimonial{{$item->id}}" tabindex="-1" role="dialog" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
        <div class="modal-content"> 
            <div class="modal-body"> 
                <form action="/home/testimonials/{{$item->id}}/update" method="POST"> 
                    @method('PUT') 
                    @csrf 
                    <div class="form-row"> 
                        <div class="form-group col-lg-6"> 
                            <label for="firstname-{{$item->id}}">Firstname</label> 
                            <input type="text" name="firstname" value="{{$item->firstname}}" class="form-control" id="firstname-{{$item->id}}" aria-describedby="firstname"> 
                            <small id="firstname" class="text-muted">Firstname</small> 
                        </div> 
                        <div class="form-group col-lg-6"> 
                            <label for="lastname-{{$item->id}}">Lastname</label> 
                            <input type="text" name="lastname" value="{{$item->lastname}}" class="form-control" id="lastname-{{$item->id}}" aria-describedby="lastname"> 
                            <small id="lastname" class="text-muted">Lastname</small> 
                        </div> 
                    </div> 
                    <div class="form-group"> 
                        <label for="comment-{{$item->id}}">Comment</label> 
                        <textarea name="comment" class="form-control" cols="30" rows="5" id="comment-{{$item->id}}" aria-describedby="comment">{{$item->comment}}</textarea> 
                        <small id="comment" class="text-muted">Client's comment</small> 
                    </div> 
                    <button type="submit" class="btn btn-custom-two">Save</button> 
                </form> 
            </div> 
        </div> 
    </div> 
</div> 
@endforeach

注意：我给表单里的id加了{{$item->id}}后缀，避免多个模态框的表单元素id重复，这也是之前可能隐藏的问题。

修复方案二：使用单个通用模态框，JS动态填充数据（更优） #

如果你的条目很多，循环生成大量模态框会增加DOM体积，推荐用一个通用模态框，点击编辑按钮时通过JavaScript把对应条目的数据填充进去：

1. 表格部分（保留编辑按钮，添加数据属性存储条目信息）

<table>
    <tbody>
        @foreach ($testimonials as $item) 
        <tr class="text-muted"> 
            <td class="text-capitalize">{{ $item->firstname }}</td> 
            <td class="text-capitalize">{{ $item->lastname }}</td> 
            <td>{{ $item->comment }}</td> 
            <td class="text-capitalize">@if ($item->status === 0) hidden @else showing @endif</td> 
            <td> 
                <button type="button" class="btn-custom-one edit-testimonial-btn" 
                    data-toggle="modal" 
                    data-target="#editTestimonialModal"
                    data-id="{{$item->id}}"
                    data-firstname="{{$item->firstname}}"
                    data-lastname="{{$item->lastname}}"
                    data-comment="{{$item->comment}}">
                    Edit
                </button> 
            </td> 
        </tr> 
        @endforeach
    </tbody>
</table>

2. 单个通用模态框（放在表格外面）

{{-- 通用编辑模态框 --}} 
<div class="modal fade" id="editTestimonialModal" tabindex="-1" role="dialog" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
        <div class="modal-content"> 
            <div class="modal-body"> 
                <form id="editTestimonialForm" method="POST"> 
                    @method('PUT') 
                    @csrf 
                    <div class="form-row"> 
                        <div class="form-group col-lg-6"> 
                            <label for="firstname">Firstname</label> 
                            <input type="text" name="firstname" class="form-control" id="firstname" aria-describedby="firstname"> 
                            <small id="firstname" class="text-muted">Firstname</small> 
                        </div> 
                        <div class="form-group col-lg-6"> 
                            <label for="lastname">Lastname</label> 
                            <input type="text" name="lastname" class="form-control" id="lastname" aria-describedby="lastname"> 
                            <small id="lastname" class="text-muted">Lastname</small> 
                        </div> 
                    </div> 
                    <div class="form-group"> 
                        <label for="comment">Comment</label> 
                        <textarea name="comment" class="form-control" cols="30" rows="5" id="comment" aria-describedby="comment"></textarea> 
                        <small id="comment" class="text-muted">Client's comment</small> 
                    </div> 
                    <button type="submit" class="btn btn-custom-two">Save</button> 
                </form> 
            </div> 
        </div> 
    </div> 
</div>

3. JavaScript代码（填充数据并更新表单action）

$(document).ready(function() {
    $('.edit-testimonial-btn').click(function() {
        let id = $(this).data('id');
        let firstname = $(this).data('firstname');
        let lastname = $(this).data('lastname');
        let comment = $(this).data('comment');
        
        // 更新表单的action地址
        $('#editTestimonialForm').attr('action', `/home/testimonials/${id}/update`);
        // 填充表单数据
        $('#firstname').val(firstname);
        $('#lastname').val(lastname);
        $('#comment').val(comment);
    });
});

最后检查你的Controller #

你的update方法目前只是dd($request)，测试通过后记得改成实际的更新逻辑：

public function update(Request $request, Testimonial $testimonial) {
    // 验证请求数据（可选但推荐）
    $validated = $request->validate([
        'firstname' => 'required|string',
        'lastname' => 'required|string',
        'comment' => 'required|string',
    ]);
    
    // 更新数据
    $testimonial->update($validated);
    
    // 重定向或返回响应
    return redirect()->back()->with('success', 'Testimonial updated successfully');
}

内容的提问来源于stack exchange，提问作者Mena