Laravel Collective删除按钮模态框问题：点击后无法输入数据

嘿，我明白你的问题了——现在你的删除按钮一点击就直接提交表单了，模态框刚弹出来就没了，根本没法输入内容对吧？这是因为你用的Form::button默认是提交按钮，点击就触发表单提交了。咱们得把触发模态框和提交表单的动作分开，下面是修改方案：

1. 调整表单和触发按钮 #

首先，把原来的提交按钮改成普通按钮，只负责弹出模态框，同时保留表单结构（但不要让按钮直接提交）：

{!! Form::open(['route' => ['jobs.destroy', $job->id], 'method' => 'delete', 'class' => 'btn-group', 'id' => 'jobStopForm']) !!}
    <!-- 改成普通按钮，通过data属性触发模态框 -->
    {!! Form::button('<i class="fa fa-trash"></i> 删除', ['class' => 'btn btn-danger', 'data-toggle' => 'modal', 'data-target' => '#confirmDeleteModal']) !!}
{!! Form::close() !!}

2. 创建带输入框的模态框 #

在页面合适位置（比如页面底部）添加Bootstrap模态框（Laravel项目通常会集成Bootstrap），里面放入输入框和确认提交按钮：

<!-- 确认删除模态框 -->
<div class="modal fade" id="confirmDeleteModal" tabindex="-1" role="dialog" aria-labelledby="confirmDeleteLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmDeleteLabel">确认删除</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>请输入删除原因（可选）：</p>
                <!-- 添加输入框，提交时会随表单一起发送到后端 -->
                <input type="text" name="delete_reason" class="form-control" placeholder="输入删除原因...">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <!-- 这个按钮负责触发表单提交 -->
                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">确认删除</button>
            </div>
        </div>
    </div>
</div>

3. 添加JavaScript处理提交动作 #

写一段JS代码，让模态框里的确认按钮点击时，再提交删除表单：

<script>
document.getElementById('confirmDeleteBtn').addEventListener('click', function() {
    // 提交表单
    document.getElementById('jobStopForm').submit();
    // 关闭模态框
    document.getElementById('confirmDeleteModal').classList.remove('show');
    document.body.classList.remove('modal-open');
    document.querySelector('.modal-backdrop').remove();
});
</script>

如果你的项目用了jQuery，也可以用更简洁的写法：

<script>
$('#confirmDeleteBtn').click(function() {
    $('#jobStopForm').submit();
    $('#confirmDeleteModal').modal('hide');
});
</script>

额外提示 #

• 如果你需要在后端获取输入的删除原因，在destroy方法里可以通过$request->input('delete_reason')拿到这个值。
• 确保页面已经引入了Bootstrap的CSS和JS文件，不然模态框可能无法正常显示和交互。

这样修改后，点击删除按钮只会弹出模态框，你可以从容输入内容，点击确认删除才会提交表单，就不会出现刚弹窗就提交的问题啦！

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