javascript - 表单结束标签在 Bootstrap 4 模式中无法正常工作

Question

我正在尝试在我的 Laravel 项目中使用 Bootstrap 4 模式实现确认删除。当模式打开然后提交按钮不起作用时，我检查了浏览器并显示，我的表单结束标记在我放置的位置没有关闭，表单结束标记恰好放置在表单开始标记之后。我没有发现问题。我检查了代码中的所有地方。有人可以帮我解决这个问题吗？

index.blade.php

<div class="panel-body">

    <table id="example" class="table table-striped table-bordered" style="width:100%">
        <thead>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Address</th>
                <th>Blood Group</th>
                <th>Type</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            @forelse($patients as $patient)
            <tr>
                <td>{{ $loop-> index + 1 }}</td>
                <td>{{ $patient->name }}</td>
                <td>{{ $patient->address }}</td>
                <td>{{ $patient->blood_group }}</td>
                <td>{{ $patient->type_rh }}</td>
                <td>
                    <a href="{{ url('admin/patient/'.$patient->id.'/details') }}" target="_blank">
                        <i class="fa fa-eye" style="color:#006400"></i>
                    </a>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="{{ url('admin/patient/'.$patient->id.'/edit') }}">
                        <i class="fa fa-edit" style="color:#e64980"></i>
                    </a>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#" data-toggle="modal" data-target="#deletePatient-{{ $patient->id }}">
                        <i class="fa fa-trash" style="color:#cc3300"></i>
                    </a>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="{{ url('admin/patient/pdf/'.$patient->id) }}" class="btn btn-primary pull-right"><i class="fas fa-file-pdf"></i>&nbsp;PDF</a>
                </td>
                <!-- Delete Modal -->
                <div class="modal fade" id="deletePatient-{{ $patient->id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1">
                    <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>Confirm Delete</h4>

                            </div>
                            <form action="{{ url('admin/patient/'.$patient->id.'/delete') }}" method="POST">
                                {{ csrf_field() }}
                                {{ method_field('DELETE') }}
                            <div class="modal-body">
                                <p>Are you sure want to delete this?</p>
                            </div>
                            <div class="modal-footer">
                               <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-danger">Delete</button>
                            </div>
                            </form>
                        </div>
                    </div>
                </div>
            </tr>

            @empty

            @endforelse
        </tbody>
        <tfoot></tfoot>

    </table>
</div>

Answer 1

这是因为如果您希望包含 FORM 的 DIV 位于 TABLE 内，则必须将其放入 TD 内。

你不能只是随机地将 div 放入表格中 - 它的行为与 TR 或 TD 不同，并且你会因为不正确的 HTML 而收到类似的错误

注意:

正确使用表格中的表单的方法只有两种:

<form>
    <table>...</table>
</form>

和

<table>
    ...
    <tr>
        ...
        <td>
            <form>...</form>
        </td>
        ...
    </tr>
    ...
</table>