仅在模态验证后提交表单

Question

我正在使用 this package 创建我的表单。我目前正在使用此代码来确认对某个项目的抑制

{!! Form::open( ['method' => 'delete', 'url' => route($entity.'.destroy', [$entity => $id]), 'style' => 'display: inline', 'onSubmit' => 'confirm("Do you really want to delete that?")']) !!}
    <button type="submit" class="btn-delete btn btn-xs btn-danger">
        <i class="glyphicon glyphicon-trash"></i>
    </button>
{!! Form::close() !!}

这很好用，但我想用模态替换这个丑陋的 js 确认

所以我尝试了这个

{!! Form::open( ['method' => 'delete', 'url' => route($entity.'.destroy', [$entity => $id]), 'style' => 'display: inline', 'onSubmit' => '$("#modal_' . $id. '").modal("show");']) !!}
    <button type="submit" class="btn-delete btn btn-xs btn-danger">
        <i class="glyphicon glyphicon-trash"></i>
    </button>
{!! Form::close() !!}


<!-- Modal -->
<div id="modal_{{ $id }}" class="modal fade" role="dialog">
    <div class="vertical-alignment-helper">
        <div class="modal-dialog vertical-align-center">
            <div class="modal-content">
                <div class="modal-body">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <p>You are about to delete.</p>
                    <p>Do you want to proceed?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary pull-left" data-dismiss="modal">Cancel</button>                 
                    <button type="button" class="btn btn-danger">
                        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Confirm
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

但是在任何点击模态框之前，项目就被删除了。

是否可以通过使用此包正确触发模式，还是我应该写我的老学校 html 表格？

Answer 1

Form 包的目的只是帮助您创建 html 表单元素。更改普通 html 形式的包最终会得到相同的结果，因为它所做的只是生成相同的元素标记，这些标记是在 PHP 的帮助下用 html 编写的。

更改触发模式的第一个按钮，并使用模式确认按钮提交表单即可。

<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#modal_{{ $id }}">
    <i class="glyphicon glyphicon-trash"></i>
</button>

<!-- Modal -->
<div id="modal_{{ $id }}" class="modal fade" role="dialog">
    <div class="vertical-alignment-helper">
        <div class="modal-dialog vertical-align-center">
            <div class="modal-content">
                <div class="modal-body">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <p>You are about to delete.</p>
                    <p>Do you want to proceed?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary pull-left" data-dismiss="modal">Cancel</button>                 
                    {!! Form::open( ['method' => 'delete', 'url' => route($entity . '.destroy', [$entity => $id]) ]) !!}
                        <button type="submit" class="btn-delete btn btn-xs btn-danger">
                            <i class="glyphicon glyphicon-trash"></i>
                        </button>
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>
</div>

仅在模态验证后提交表单

Form submit only after modal validation

html

forms

laravel-5.5