【问题标题】:Using Jquery Confirm in Laravel Form Open?在 Laravel 表单中使用 Jquery Confirm 打开?
【发布时间】:2016-08-02 17:36:37
【问题描述】:

我有一个用 Laravel Form 包编写的表单。

{!! Form::open(['action' => ['Test\\BlogController@destroy', $thread->id], 'method' => 'delete', 'onsubmit' => 'Confirm()' ]) !!}
{!! Form::submit('Delete', ['class' => 'btn btn-danger']) !!}
{!! Form::close() !!}

现在我想要这个表单中的这个 Jquery 代码。我希望如果用户单击提交按钮,则应该弹出 Jquery 确认框。

那是我的 Jquery:

bootbox.confirm("Are you sure?", function(result) {
  Example.show("Confirm result: "+result);
}); 

我就是这样尝试的:

        <script type="text/javascript">
            function Confirm()
            {
                bootbox.confirm("Are you sure?", function(result) {
                    Example.show("Confirm result: "+result);
                });
            }


        </script>

{!! Form::open(['action' => ['Blog\\BlogController@destroy', $thread->id], 'method' => 'delete', 'onsubmit' => 'Confirm()' ]) !!}
{!! Form::submit('Delete', ['class' => 'btn btn-danger']) !!}
{!! Form::close() !!}

但这对我不起作用。有什么帮助吗?

【问题讨论】:

  • preventDefault() 添加到您的 jquery 中。
  • 这什么也没做:/
  • 首先确保提交按钮调用confirm函数,在bootbox.confirm之前添加一个警报。

标签: javascript php jquery forms laravel


【解决方案1】:

您可以添加一个类 blog-form 例如:

{!! Form::open(['action' => ['Blog\\BlogController@destroy', $thread->id], 'method' =>
    'delete', 'class' => 'blog-form' ]) !!}

然后使用内联事件 onsubmit 将您的 js 代码 submit 事件附加到添加的类 blog-form 并提交表单以防得到肯定的响应:

$('.blog-form').submit(function(e) {
    e.preventDefault();

    var blog_form = $(this);

    bootbox.confirm("Are you sure?", function(result) {
        if (result) {
            blog_form.submit();
        }
    });
});

希望这会有所帮助。

【讨论】:

  • 这应该可以工作@WellNo 确保您已包含 jquery 库并检查开发人员控制台是否有错误。
  • Jquery 包含在开发中。控制台只是一个:Uncaught ReferenceError: $ is not defined --- 我是 JS/Jquery 之类的初学者..
  • Uncaught ReferenceError: $ 表示未正确包含 Jquery。
  • 好的,我在 CDN 中包含了 jquery,现在 Uncaught ReferenceError: $ 消失了。但它仍然不起作用:/线程被删除但没有任何消息
  • 所以尝试使用警报来调试您的代码,例如在e.preventDefault(); 之后添加警报以确保触发了submit 事件。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-02-11
  • 2015-02-02
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多