表单结束标记在bootstrap 4模式中无法正常工作

时间:2018-03-23 07:14:54

标签: javascript twitter-bootstrap laravel bootstrap-4 bootstrap-modal

我正尝试在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>

after inspect the browser

3 个答案:

答案 0 :(得分:2)

这是因为如果你想让它在TABLE里面,你的包含FORM 的DIV必须放在TD里面。

您不能随意将div放在表格中 - 它不会与TR或TD相同,并且由于HTML不正确,您会收到类似错误

注意:

只有2种方法可以正确使用表格中的表格:

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

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

答案 1 :(得分:0)

替换按钮类型,如下所示

WebDriverWait(self.driver, 30).until(EC.element_to_be_clickable((By.XPATH, "xpath"))).click()

提交按钮应该像以下一样

<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="submit" class="btn btn-danger">Delete</button>
     </div>
</form>

答案 2 :(得分:0)

在PHP中是这样的:

$modalcontent .= '
<div class="modal fade" id="modal_'.$modalid.'">
          <div class="modal-dialog">
            <div class="modal-content">
</div></div</div>';

echo '<tr><td></td><td></td></tr>';

$modalcontent .= '
<div class="modal fade" id="modal_'.$modalid.'">
          <div class="modal-dialog">
            <div class="modal-content">
</div></div</div>';

echo '<tr><td></td><td></td></tr>';

$modalcontent .= '
<div class="modal fade" id="modal_'.$modalid.'">
          <div class="modal-dialog">
            <div class="modal-content">
</div></div</div>';
echo '<tr><td></td><td></td></tr>';
..
</tbody></table>

//And now just do:
echo $modalcontent; //-> this will shift all modals out of the table.