表格仅在模态验证后提交

时间:2017-12-05 15:39:13

标签: html forms laravel-5.5

我使用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表单?

1 个答案:

答案 0 :(得分:0)

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>
相关问题